Question

让我们说

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

在某些情况下，根据具体情况，我可以在姓氏控制上添加或删除任何验证器。

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

像

这样的东西

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

Answer 1

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

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

Answer 2

您可以显示如下错误消息：

<div class="row">
<div class="col-lg-10 col-offset-2">
<div class="well bs-component">
  <form name="registerForm" class="form-horizontal" (ngSubmit)="onSubmit(email, password, name, surname, username, homephonenumber, mobilenumber)" >
    <fieldset>
      <legend>Register</legend>
      <div class="form-group">
        <label for="username" class="col-lg-2 control-label">UserName</label>
        <div class="col-lg-10">
          <input type="text" class="form-control" name="username" [(ngModel)]="username" placeholder="Username"  required minlength="4" maxlength="20">
        </div>
      </div>
      <div class="form-group">
        <label for="email" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
          <input type="text" class="form-control" name="email" [(ngModel)]="email" placeholder="Email"  required minlength="4" >
          <div *ngIf="email.dirty && !email.valid" class="alert alert-danger">
                        <p *ngIf="email.errors.required">mailAddressis required.</p>
                        <p *ngIf="email.errors.incorrectMailFormat">Email format is invalid.</p>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-lg-2 control-label">Password</label>
        <div class="col-lg-10">
          <input type="password" class="form-control" name="password" [(ngModel)]="password" placeholder="Password"  required minlength="4">
        </div>
      </div>
      <div class="form-group">
        <div class="col-lg-10 col-lg-offset-2">
          <button type="reset" class="btn btn-default">Cancel</button>
          <button type="submit" class="btn btn-primary">Register</button>
        </div>
      </div>
    </fieldset>
  </form>
</div>

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

Answer 3

如果要检查表单控件上是否有验证器，可以执行以下操作：

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

if(control.validator == Validators.required)

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

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

Answer 4

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

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

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

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

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

第二，事实证明Angular将创建验证器来匹配您在输入中设置的属性。因此，对于标准验证者，我的建议是完全不指定验证者。

改为执行以下操作：

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

在表单声明中：

surnameRequired

然后设置{{1}}的值以添加或删除验证器。

我有一个working StackBlitz。

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

Answer 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();
  });

虽然有很长的路要走，但是可以。

Angular2获取formcontrol的现有验证器

5 个答案: