Angular-如何继承组件验证?

时间:2018-11-14 06:39:26

标签: angular angular-reactive-forms angular-forms

我具有带有自定义组件的角反应形式(实现ControlValueAccessor)。这个自定义控件内部有一个输入(使用简单的ngModel)。自定义控件具有通过FormControl从外部连接的验证器,并且值更改时验证类正确地应用于该控件。但是,内部输入不知道这些验证器和控件的状态,因此它始终具有有效的类(因此,总体视觉外观不正确)。

如何使内部输入跟踪我的控件的有效性?

我没有工作的尝试#1:

public ngAfterViewInit() {
    const control = this.injector.get(NgControl);
    if (control) {
        this.controlStatusChangesSubscription = control.statusChanges.subscribe(() => {
            this.inputNgModel.control.setErrors({ "control": !control.valid });
            this.changeDetectorRef.detectChanges();
        });
    }
}

尝试2失败:

public ngAfterViewInit() {
    const control: NgControl = this.injector.get(NgControl);
    if (control) {
        const controlValidationErrors = control.statusChanges.pipe(map((status) => <ValidationErrors>{ "controlError": !control.valid }));
        this.inputNgModel.control.setAsyncValidators((c) => controlValidationErrors);
    }
}

编辑:在输入中添加带有ng-invalid的ngClass可以解决问题,但是我正在寻找一种不太“ hacky”的方式

0 个答案:

没有答案