Question

我正在尝试使用Reactive Forms模块在Angular 2中构建注册表单。因此，我为表单定义了一个FormGroup，然后我可以为其中的每个FormControl列出验证器。

考虑这个部分类：

export class TestFormComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [Validators.required]);
  passwordConfirm = new FormControl("", [Validators.required, this.validatePasswordConfirmation]);

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "passwordConfirm": this.passwordConfirm
    });
  }

  validatePasswordConfirmation(fc: FormControl) {
    var pw2 = fc.value;
    var pw = // how do I get this value properly????

    if (pw === '') {
      return {err:"Password is blank"};
    }

    if (pw2 === '') {
      return {err:"Confirmation password is blank"};
    }

    if (pw !== pw2) {
      return {err:"Passwords do not match"}
    }

    return null;
  }
}

您可以看到我为passwordConfirm字段创建了验证器，但我不知道如何获取主password字段的值（用作pw字段验证者）进行比较。

我不能只引用this.form.value.password，因为验证程序中的this没有引用包含表单的主类。

有什么想法吗？

Answer 1

所以答案结果是在表单上放置一个新的验证器，然后使用传递给验证器的FormGroup对象作为比较字段值的方法。我怀疑的那么多。然而，我缺少的是如何在单个passwordConfirm字段上正确设置错误状态。此代码显示了如何执行此操作：

export class TestFormComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [Validators.required]);
  passwordConfirm = new FormControl("", [Validators.required, this.validatePasswordConfirmation]);

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "passwordConfirm": this.passwordConfirm
    },
    {
      validator: this.validatePasswordConfirmation
    });
  }

  validatePasswordConfirmation(group: FormGroup) {
    var pw = group.controls['password'];
    var pw2 = group.controls['passwordConfirm'];

    if (pw.value !== pw2.value) { // this is the trick
      pw2.setErrors({validatePasswordConfirmation: true});
    }

    // even though there was an error, we still return null
    // since the new error state was set on the individual field
    return null; 
  }
}

上面代码中的评论中提到的技巧是，您可以使用FormControl方法在各个setErrors()字段上设置错误状态。现在，使用此代码，确认字段将根据其具有的常规验证器（如Validators.required）以及我们添加的基于自定义表单的验证器获取正确的有效/无效状态集。

使用此方法，您可以创建复杂的基于表单的验证器，可以检查许多不同表单字段的状态，并根据您可以提出的任何业务逻辑单独设置验证状态。这使得Angular 2 Reactive表单的跨领域验证非常简单。

Answer 2

如果pw2字段本身具有验证器，

pw2.setErrors(null);会导致问题，例如minLength：

  ngOnInit() {
    this.form = this.fb.group({
      "password": [this.password, Validators.minLength(6)],
      "passwordConfirm": [this.passwordConfirm, Validators.minLength(6)]
    },
    {
      validator: this.validatePasswordConfirmation
    });
  }

setErrors(null)会破坏minLength警告。

最好是跨字段验证器validatePasswordConfirmation()返回错误，因为其中错误出现在HTML中 - 在单个字段旁边，或者在表单上方/下方整体 - 无论如何完全在我们的控制之下。

<div *ngIf="myNgForm.submitted" class="text-error">
    <span *ngIf="form.errors?.validatePasswordConfirmation">This field must match the first field</span>
    <span *ngIf="form.controls.passwordConfirm.errors?.minlength">must be at least 6 chars</span>
</div>

Answer 3

Michael Oryl的答案在我的案例中有两个错误，也许我使用不同的版本（Angular 2.3.0）：

1。 passwordConfirm = new FormControl（＆＃34;＆＃34;，[Validators.required，this.validatePasswordConfirmation]）;

应该是：

passwordConfirm = new FormControl("", [Validators.required]);

因为：

validatePasswordConfirmation(group: FormGroup)

使用FormGroup的子元素触发。我不知道为什么但它发生了。所以整个组的第二个验证器就足够了，因为它会触发整个FormGroup。

在重复字段后编辑原始字段且两个字段相等时，Michaels代码保持错误状态。在这种情况下，此代码可以完成更复杂的验证，您需要更复杂的东西：
```
if (pw.value != pw2.value) {
  pw2.setErrors({validatePasswordConfirmation: true});
}
else{
  pw2.setErrors(null);
}
```

完整代码：

export class TestFormComponent implements OnInit {
  form: FormGroup;
  password = new FormControl("", [Validators.required]);
  passwordConfirm = new FormControl("", [Validators.required]);

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      "password": this.password,
      "passwordConfirm": this.passwordConfirm
    },
    {
      validator: this.validatePasswordConfirmation
    });
  }

  validatePasswordConfirmation(group: FormGroup) {
    var pw = group.controls['password'];
    var pw2 = group.controls['passwordConfirm'];

    if (pw.value !== pw2.value) { // this is the trick
      pw2.setErrors({validatePasswordConfirmation: true});
    }else{
      pw2.setErrors(null);
    }

    return null; 
  }
}

对Angular 2 Reactive Forms执行跨领域验证

3 个答案: