Angular2获取表单控件的现有验证器

Posted 2023-03-13

【中文标题】Angular2获取表单控件的现有验证器

【英文标题】：Angular2 get existing validators of a formcontrol

【发布时间】：2017-09-01 13:23:11

【问题描述】：

让我们说

surname = new FormControl('', [Validators.required, Validators.minLength(2)]);

在某些时候，我可能会根据情况添加或删除任何姓氏控制的验证器。

最后我如何知道姓氏控制上存在哪些验证器？我在文档中找不到任何东西，也无法将控件转储到控制台

有点像

surname.getValidators() should return - ['required', 'minLength']

【参考方案1】：

目前不支持从控件读取验证器

另见https://github.com/angular/angular/issues/13461

【讨论】：

在 Angular 5 中是否仍然是相同的场景

问题仍未解决

值得一提的是，隐藏在那个长长的guthub问题链接中，有at least a partial solution可用，还不错....

【参考方案2】：

您可以像这样显示错误消息：

onValueChanged(data?: any) 
    if (!this.heroForm)  return; 
    const form = this.heroForm;
    for (const field in this.formErrors) 
            // clear previous error message (if any)
            this.formErrors[field] = '';
            const control = form.get(field);
            if (control && control.dirty && !control.valid) 
            const messages = this.validationMessages[field];
            for (const key in control.errors) 
                this.formErrors[field] += messages[key] + ' ';
            
        
    

formErrors = 
    'name': '',
    'power': ''
;
validationMessages = 
    'name': 
        'required':      'Name is required.',
        'minlength':     'Name must be at least 4 characters long.',
        'maxlength':     'Name cannot be more than 24 characters long.',
        'forbiddenName': 'Someone named "Bob" cannot be a hero.'
    ,
    'power': 
        'required': 'Power is required.'
    
;

参考：https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive-component-template

【参考方案3】：

如果你想检查一个表单控件上是否有一些验证器，你可以这样做：

对于 Angular 内置验证器，您可以使用：

if(control.validator == Validators.required)

对于自定义验证器，它不起作用，您可以使用此解决方法：

if(control.validator.toString() == customValidator().toString())

【讨论】：

如何处理多个验证器？假设我有email: [''[Validators.required, Validators.email]]，那么我可能无法同时检查两者，对吧？

是的，看来你是对的 :-( ，我只需要一次验证的控件...

【参考方案4】：

Günter Zöchbauer's answer 在 Angular 6 中仍然是正确的，但有一种解决方法对我来说效果很好。

我的解决方法取决于两个观察结果：

首先，您可以通过查看errors 对象上的键来查看当前哪些验证失败。因此，如果您指定了 Validators.required 和 Validators.minLength，则错误对象将如下所示：

 required: true, minlenght:  ...  

这对于很多用例来说已经足够了，当您并不真正关心验证器是否存在但不会阻止表单提交时。

其次，事实证明 Angular 会创建验证器来匹配您输入中设置的属性。所以对于标准验证器，我的建议是根本不指定验证器。

改为这样做：

<input type="text" formControlName="surname" [required]="surnameRequired">

在您的表单声明中：

form = this.formBuilder.group(
  surname: '',
  anotherField: ['', Validators.required],
  yetAnotherField: ['', Validators.required]
);

然后设置surnameRequired的值来添加或删除验证器。

我有一个working StackBlitz。

我的方法不适用于自定义验证器，但我的大部分用例都不使用这些。您的里程可能会有所不同。

【参考方案5】：

我对读取表单控件上现有的验证器的需求略有不同。我有一些动态应用验证器的代码，我想要一些单元测试来确保它正在做它应该做的事情。但是由于您无法读取验证器，所以您有点搞砸了。

这是我需要做的：

  /**
   * Validates that Validators.requires is applied ...
   */
  it('should have a validator of required ...', () => 
    component.functionThatShouldApplyValidator(true);
    // Set the form control with an invalid value
    component.formCtrl.setValue('');
    // Expect the control to have an error  required: true 
    expect(component.formCtrl.errors.required).toBeTrue();
  );

这样做有很长的路要走，但它确实有效。