javascript - 将从 api 调用检索到的参数传递给 FormBuilder 中的自定义验证器

Question

在组件中，我formBuilder使用Angular Reactive Forms

我从这篇文章中得到了示例代码

min = 10;
max = 20;
ngOnInit() {
    this.loginForm = new FormGroup({
        email: new FormControl(null, [Validators.required]),
        password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
        age: new FormControl(null, [ageRangeValidator(this.min, this.max)])
    });
}

自定义验证在函数中定义ageRangeValidator

function ageRangeValidator(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== undefined && (isNaN(control.value) || control.value < min || control.value > max)) {
            return { 'ageRange': true };
        }
        return null;
    };
}

以防万一，min并且max是从 api 调用中获得的。如何将它们传递给功能自定义验证器？

标签： javascriptangularangular2-formbuilder

Answer 1

FormControl API 提供setValidators方法。您可以使用它来动态设置验证器。在 subscribe 回调中，您可以调用 setValidators ，如下所示：

尝试这个：

 ..subscribe((result)=>{
    this.age.setValidators([ageRangeValidator(result.min,result.max)]);
    this.loginForm.get('age').updateValueAndValidity();    
  })

例子