在Angular 2

Question

我创建了一个自定义自动填充表单控件，它实现了ControlValueAccessor和Validator并将其成功集成到了一个被动表单中。自定义表单控件中的input元素使用ngModel。

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

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

一切正常，但遗憾的是input元素已应用ng-valid CSS类，因为它不是反应验证过程的一部分（它使用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>

我在appInput指令中尝试了ngControl和setErrors，但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);
}

然后在您的视图中，您可以将任何元素绑定到ngControl上的有效性：

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

Answer 2

尝试此方法，将＃searchTerm =“ ngModel”添加到输入中，并使用以下命令进行验证：searchTerm.invalid

<input
    #searchTerm="ngModel"
    appInput
    type="search"
    [ngModel]="name"
    (ngModelChange)="keyupSubject.next($event)"
/>
<div *ngIf="searchTerm.invalid" class="invalid-field">
   Field Invalid
</div>