Angular2:找出FormControl是否需要验证器？

Question

如果为控件注册了所需的验证器,是否有人知道找到Angular2 FormControl的方法.

this.form = builder.group({name: ['', Validators.required]};

然后我可以查询this.form.controls['name']控件是否是必填字段？我知道我可以检查它是否有效,但那不是我想要的.

亲切的问候,马克

Answer 1

此函数应适用于FormGroups和FormControls

  export const hasRequiredField = (abstractControl: AbstractControl): boolean => {
    if (abstractControl.validator) {
        const validator = abstractControl.validator({}as AbstractControl);
        if (validator && validator.required) {
            return true;
        }
    }
    if (abstractControl['controls']) {
        for (const controlName in abstractControl['controls']) {
            if (abstractControl['controls'][controlName]) {
                if (hasRequiredField(abstractControl['controls'][controlName])) {
                    return true;
                }
            }
        }
    }
    return false;
};

Answer 2

Angular 现在提供了hasValidator用于检查表单控件是否具有同步验证器的功能。如果您碰巧需要检查它是否有异步验证器，那么hasAsyncValidator.

在您的情况下，当您想检查是否需要表单控件时，您可以执行以下操作：

this.form.get('name').hasValidator(Validators.required);

编辑：TypeScript 现在通常会抱怨

"Property 'hasValidator' does not exist on type 'AbstractControl'

您需要告诉 TypeScript 这实际上是一个FormControl（“不仅仅是”基类AbstractControl）。因此，例如以下内容应该可以正常工作：

(this.form.get('name') as FormControl).hasValidator(Validators.required);

Answer 3

虽然没有 Angular API 可以直接查找是否required为特定字段设置了验证器，但实现这一点的迂回方式如下所示：

import { NgForm, FormControl } from '@angular/forms';

const isRequiredControl = (formGroup: NgForm, controlName: string): boolean => {
    const { controls } = formGroup
    const control = controls[controlName]
    const { validator } = control
    if (validator) {
        const validation = validator(new FormControl())
        return validation !== null && validation.required === true
    }
    return false
}

我已经对此进行了测试，并且仅当Validator.Required验证器添加到特定的FormControl.

Answer 4

没有方法如何检查验证器或获取所有验证器：https://github.com/angular/angular/issues/13461

@fairlie-agile 解决方案非常聪明。但我认为我们必须使用空的 FormControl，因为我们需要触发所需的验证器，并且 this.group.controls[this.config.name]可能已经用某个值进行了初始化。

ngOnInit() {
    let formControl = this.group.controls[this.config.name];
    let errors: any = formControl.validator && formControl.validator(new FormControl());
    this._required = errors !== null && errors.required;
}

Answer 5

我不知道检查控件是否需要验证器的确切方法是什么。

但解决方法可能是这样的，每当控件需要验证器时，它就会向该控件添加validator()函数。

例如。

<input type="text" formControlName="firstname">

constructor(private formBuilder: FormBuilder){
    this.registerForm = this.formBuilder.group({
        firstname: ['', Validators.required]     //<<<===one required validation on firstname control
    });

    console.log(this.registerForm.controls.firstname.validator.length);
                                                 //<<<===this will return 1.
   });

}

在上面的代码中，验证器的长度是 one(1)

  console.log(this.registerForm.controls.firstname.validator.length);
                                                 //this will return exception

这一行将返回一个。如果没有附加验证器，那么名字将没有 validator() 函数，所以在这种情况下我会给出一个例外。

演示：https://plnkr.co/edit/I7b5JNAavmCJ6Py1eQRr? p=preview