Angular 子组件 ng-invalid

我正在创建一个自定义输入组件，该组件通过实现实现形式兼容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>

The div and my-editor元素都得到ng-invalid类已应用，但我找不到一种优雅的方法来将该类应用于input元素。

这是显示该问题的 Stackblitz。https://stackblitz.com/edit/angular-child-ng-invalid https://stackblitz.com/edit/angular-child-ng-invalid

我已经通过使用“NgControl”使用以下实现解决了您的问题，使用这种方法您将使自定义输入模块化，可以在需要时使用，如果我可以进一步提供帮助，请发表评论：https://stackblitz.com/edit/angular-sdrrbj?file=src%2Fapp%2Fapp.component.ts https://stackblitz.com/edit/angular-sdrrbj?file=src%2Fapp%2Fapp.component.ts