Угловой дочерний компонент ng-invalid

Question

Я создаю пользовательский компонент ввода, который совместим с формами путем реализации ControlValueAccessor, Этот компонент ввода представляет собой композицию из одного или нескольких дочерних входов, но у меня возникают проблемы с получением ng-invalid CSS-класс для распространения на ребенка 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

Answer 1

Я решил вашу проблему, используя приведенную ниже реализацию с использованием 'NgControl', используя этот подход, вы сделаете свой пользовательский ввод модульным, который можно использовать по мере необходимости, пожалуйста, прокомментируйте, если я могу помочь в дальнейшем: https://stackblitz.com/edit/angular-sdrrbj?file=src%2Fapp%2Fapp.component.ts