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

角子组件ng-invalid

1 个答案: