获取存在于FormGroup/FormControl中的验证器

Question

我在我的应用程序中使用材料2，但在这个问题中，我想专门解决输入的问题。

正如您在API参考中看到的，有一个名为“required”的属性绑定，它在占位符中显示为星号。

因此，我想知道是否有方法检查表单控件在Angular中是否有特定的验证器，因为我真的不想为每个输入手动设置

我阅读了AbstractControl文档，但没有找到任何有关它的内容。我遇到了hasError方法（具有讽刺意味的是，它在任何地方都没有记录...既不是在FormGroup中，也不是在FormControl中，也不是在AbstractControl中），但这不是我要找的。它只是检查表单控件是否有错误，但您可能已经阅读过，我想检查控件是否有一些特定的验证器...

一些代码：

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>

我希望这个问题足够清楚。提前谢谢。

Answer 1

Angular v12.2引入了hasValidator（）：https://github.com/angular/angular/pull/42838

示例：this.formGroup.controls['anyCtrl].hasValidator（Validators.required）

您还可以稍后以编程方式添加或删除验证器。请参阅addValidators（）、RemoveValidators（）等。

https://angular.io/api/forms/AbstractControl#hasValidator

Answer 2

这个答案是@joh04667的延续，他们写道：

public hasValidator(control: string, validator: string): boolean {
  return !!this.myForm.controls[control].validators(control).hasOwnProperty(validator);
 // returns true if control has the validator
}

然而，没有抽象控件。validators（）方法。我假设是AbstractControls。validator（）的意思是。

方法仅适用于“失败”的验证器（例如，值为“”（空）的控件上的必需验证器）。因为如果通过，则返回null。一种解决方法是设置值，使其始终失败，然后恢复。

public hasValidator(control: string, validator: string): boolean {
    let control: AbstractControl = this.myForm.controls[control];
    let lastValue: any = control.value;
    switch(validator) {
        case 'required':
            control.setValue('');  // as is appropriate for the control
        case 'pattern':
            control.setValue('3'); // given you have knowledge of what the pattern is - say its '\d\d\d'
        ....
    }
    let hasValidator: boolean = !!control.validator(control).hasOwnProperty(validator);

    control.setValue(lastValue);
    return hasValidator;
}

这太可怕了。它回避了一个问题——为什么没有抽象控制。getValidators（）：ValidatorFn[]| null？

隐藏这一点的动机是什么？也许他们担心有人会输入他们的代码：

...
secretPassword: ['', [Validators.pattern('fjdfjafj734738&UERUEIOJDFDJj')]
...

Answer 3

Angular并不能真正提供一种很好、干净的方法来实现这一点，但这是可能的。我认为验证器存储在注入FormBuilder的服务中（NG\u验证器），我将研究劫持该服务或将其注入组件，但目前这将起作用：

文档和源代码在AbstractControl上显示了键入到ValidatorFn的validator成员<不幸的是，代码>验证器fn只是有一个null类型，所以我们看不到发生了什么。然而，在戳透生成的源代码并探测应用程序后，我们似乎可以传递这个验证器方法a控件参数，该参数将返回该控件上所有验证器的对象，无论它是否在传递。

奇怪的是，这只适用于FormControl本身，而不适用于FormGroup（在FormGroup上，验证器成员不是函数，并且在我的测试中始终是null）。编译后的JS表示此函数接受控制参数；我尝试过传入FormControl引用，但据我所知，只要此参数不为空，它只会返回控件上的验证器。

// in the constructor
this.myForm = this.formBuilder.group({
  'anyCtrl': ['', Validators.required],
  'anotherCtrl': ['', Validators.compose([Validators.required, Validators.email])]
});

// later on 
let theValidators = this.myForm.controls['anyCtrl'].validator('');
console.log(theValidators) // -> {required: true};

let otherValidators = this.myForm.controls['anotherCtrl'].validator('');
console.log(otherValidators); // -> {required: true, email: true}

public hasValidator(control: string, validator: string): boolean {
  return !!this.myForm.controls[control].validator(control).hasOwnProperty(validator);
 // returns true if control has the validator
}

在您的标记中：

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="hasValidator('anyCtrl', 'email')">
</md-input-container>

必需的验证器有一个快捷方式。绑定实际上是指令（source/forms.js的第5022行）的一个实例。该指令实际上将把所需的验证器添加到它打开的窗体控件中。这相当于添加验证器。初始化时需要到表单组。因此，将绑定属性设置为false将从该控件中删除所需的验证器，反之亦然……无论哪种方式，该指令都会影响窗体控件。必需的值，因此将其绑定到一个需要更改的属性实际上不会起多大作用。

唯一的区别是，[必需]指令在验证程序时向占位符添加星号。必需的没有。

我将继续研究NG_验证器，但我希望现在能有所帮助！