Я создаю пользовательский компонент ввода, совместимый с формами, реализуя ControlValueAccessor
. Этот входной компонент представляет собой композицию из одного или нескольких дочерних входов, но у меня возникают проблемы при получении CSS-класса ng-invalid
для распространения на дочерний элемент input
.
Мой компонент ввода имеет такой шаблон:
<label>Input:</label> <input type="text" [(ngModel)]="value" (blur)="onInputBlur()" />
Класс:
private _value: any;
public get value(): string {
return this._value;
}
public set value(newValue) {
this._value = newValue;
this.onChangeCallback(this._value);
}
public onInputBlur() {
this.onTouchedCallback();
}
private onChangeCallback = (x: any) => { };
private onTouchedCallback = () => { };
writeValue(obj: any): void {
this._value = obj;
}
registerOnChange(fn: any): void {
this.onChangeCallback = fn;
}
registerOnTouched(fn: any): void {
this.onTouchedCallback = fn;
}
setDisabledState ? (isDisabled: boolean): void {
}
И я привязываюсь к пользовательскому компоненту ввода, используя реактивную форму, такую как:
<div [formGroup]="formGroup">
<my-editor [formControlName]="'myValue'"></my-editor>
</div>
Оба элемента div
и my-editor
применяют класс ng-invalid
, но я не могу найти элегантный способ применить этот класс к элементу input
.
Вот Stackblitz, показывающий проблему.
https://stackblitz.com/edit/angular-child-ng-invalid