angular - 在Angular 2中的自定义表单控件中设置输入无效

Question

我创建了一个自定义的自动完成表单控件，它实现了 ControlValueAccessor和 Validator并将其成功集成到 react 形式中。自定义表单控件内的输入元素使用 ngModel .

如果表单组件返回的对象包含数字 ID，则表单组件的值是有效的。

例如 { id: 1, name: 'Test' }将是一个有效的对象。

一切正常，但不幸的是输入元素有 ng-valid应用于它的 CSS 类，因为它不是响应式(Reactive)验证过程的一部分(它使用 ngModel)。

输入元素有我自己的appInput directive应用到它，所以我可以访问所有与表单相关的类，如 NgControl , 或 FormGroupDirective .

这是我的自定义自动完成模板:

<input
    #searchTerm
    appInput
    type="search"
    [ngModel]="name"
    (ngModelChange)="keyupSubject.next($event)"
/>

它位于 reactive formGroup 内:

<div [formGroup]="parentFormGroup">
    <div class="col-sm-11">

        <app-autocomplete
            formControlName="name">
        </app-autocomplete>

    </div>
</div>

我试过ngControl和 setErrors在我的 appInput 指令中，但仍未设置 CSS 类。

@Input()
set errors(errors) {
    const control = this._ngControl;
    control.control.setErrors(errors);
}

如何将自定义表单控件中的输入元素设置为无效？
我专门询问 CSS 类 ng-invalid在输入元素上。

Answer 1

在您的控制中获取 NgControl

ngOnInit(): void {
    this.ngControl = this.inj.get(NgControl);
}

然后在您看来，您可以将任何元素绑定(bind)到 ngControl 上的有效性:

<input [ngClass]="ngControl?.valid ? 'ng-valid' : 'ng-invalid'" class="form-control" />