fix(angular): apply validation classes properly

* fix(angular): add validation classes to ion-item

* fix(inputs): focus handling

fixes #17171
fixes #16052
fixes #15572
fixes #16452
fixes #17063
This commit is contained in:
Manu MA
2019-01-19 22:56:00 +01:00
committed by GitHub
parent 7832be3f1c
commit 2b4d7b7be9
14 changed files with 241 additions and 74 deletions

View File

@ -43,26 +43,43 @@ export class ValueAccessor implements ControlValueAccessor {
export function setIonicClasses(element: ElementRef) {
requestAnimationFrame(() => {
const classList = (element.nativeElement as HTMLElement).classList;
const input = element.nativeElement as HTMLElement;
const classes = getClasses(input);
setClasses(input, classes);
classList.remove(
'ion-valid',
'ion-invalid',
'ion-touched',
'ion-untouched',
'ion-dirty',
'ion-pristine'
);
for (let i = 0; i < classList.length; i++) {
const item = classList.item(i);
if (item !== null && startsWith(item, 'ng-')) {
classList.add(`ion-${item.substr(3)}`);
}
const item = input.closest('ion-item');
if (item) {
setClasses(item, classes);
}
});
}
function getClasses(element: HTMLElement) {
const classList = element.classList;
const classes = [];
for (let i = 0; i < classList.length; i++) {
const item = classList.item(i);
if (item !== null && startsWith(item, 'ng-')) {
classes.push(`ion-${item.substr(3)}`);
}
}
return classes;
}
function setClasses(element: HTMLElement, classes: string[]) {
const classList = element.classList;
classList.remove(
'ion-valid',
'ion-invalid',
'ion-touched',
'ion-untouched',
'ion-dirty',
'ion-pristine'
);
classList.add(...classes);
}
function startsWith(input: string, search: string): boolean {
return input.substr(0, search.length) === search;
}