时间戳

首页 > 解决方案 > Angular自定义验证器突出显示字段，但未设置的无效性

angular - Angular自定义验证器突出显示字段，但未设置的无效性

问题描述

我有一个使用自定义验证器的角度形式。当使用无效值时，它正确地以红色突出显示该字段，但是当使用 @ViewChildren 访问输入时，它错误地显示为有效

如何获得 Validator 设置的有效性？

我的验证人代码是

@Directive({
    selector: '[appThreeDigitsDecimalMax10]',
    providers: [{ provide: NG_VALIDATORS, useExisting: ThreeDigitsDecimalMax10ValidatorDirective, multi: true }]
})
export class ThreeDigitsDecimalMax10ValidatorDirective implements Validator {
    @Input('appThreeDigitsDecimalMax10') appThreeDigitsDecimalMax10: string;

    validate(control: AbstractControl): { [key: string]: any } | null {
        if (!this.appThreeDigitsDecimalMax10) {
            return null;
        }
        if (!control.value || isNaN(control.value)) {
            return { nan: true, valid: false };
        }
        if (control.value >= 0 && control.value < 10) {
            return null;
        }
        else {
            return { outofrange: true, valid: false };
        }
    }
}

字段以红色突出显示当运行并且我输入 12 应该失败时，它会按预期突出显示红色

我的 HTML

<input [(ngModel)]="myModel" 需要 #gridInput [appThreeDigitsDecimalMax10]="true">

然后当我抓取输入@ViewChildren('gridInput') inputViewChildren !: QueryList<Input>;并将它们打印出来时this.inputViewChildren.forEach(input => { console.log('input', input); ...，输入的有效性以某种方式显示为真

为什么输入的有效性是真的？如何以编程方式检查验证器正确设置的状态，因此输入上的红色突出显示？

提前致谢！

标签： angular

解决方案

推荐阅读