javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): item styling when control has value (#24932)

Browse Source 
Resolves #23809
This commit is contained in:
Sean Perkins
2022-04-05 12:44:45 -04:00
committed by GitHub
parent 982dc853be
commit eea25d091d
4 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
angular/src/directives/control-value-accessors/value-accessor.ts
View File

@ -110,13 +110,17 @@ export class ValueAccessor implements ControlValueAccessor, AfterViewInit, OnDes
export const setIonicClasses = (element: ElementRef): void => {
raf(() => {
const input = element.nativeElement as HTMLElement;
const input = element.nativeElement as HTMLInputElement;
const hasValue = input.value != null && input.value.toString().length > 0;
const classes = getClasses(input);
setClasses(input, classes);
const item = input.closest('ion-item');
if (item) {
setClasses(item, classes);
if (hasValue) {
setClasses(item, [...classes, 'item-has-value']);
} else {
setClasses(item, classes);
}
}
});
};
@ -127,7 +131,7 @@ const getClasses = (element: HTMLElement) => {
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)}`);
classes.push(`ion-${item.substring(3)}`);
}
}
return classes;
@ -135,13 +139,10 @@ const getClasses = (element: HTMLElement) => {
const setClasses = (element: HTMLElement, classes: string[]) => {
const classList = element.classList;
['ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine'].forEach((c) =>
classList.remove(c)
);
classes.forEach((c) => classList.add(c));
classList.remove('ion-valid', 'ion-invalid', 'ion-touched', 'ion-untouched', 'ion-dirty', 'ion-pristine');
classList.add(...classes);
};
const startsWith = (input: string, search: string): boolean => {
return input.substr(0, search.length) === search;
return input.substring(0, search.length) === search;
};