Angular 2 个表单：无法访问 FormControl 错误

Question

我正在使用表单控件，我认为我已经很好地掌握了它。现在我有一个函数可以创建控件并分配它们各自的验证器。

对于 this.password1:FormControl 和 this.password2:FormControl，应该有一个像 errors:{required: true, pattern:true} 这样的错误对象。但是，pattern 属性不会出现在任何一个的错误对象中。我什至在 Validators.minLength(8) 添加到 this.password2 FormControl 以查看它是否有效并且 minLength 错误属性也没有出现。另一方面是 'this.email' 与 errors: {required: true, email: true} 有正确的错误。

注意：当我测试表单的有效性时。它确实进行模式检查和最小长度检查。我只是无法访问应该创建的错误属性。当我 console.log FormContril 上的错误属性时，我得到的只是 errors:{required: true}.

对于为什么没有创建错误属性的任何帮助，我们将不胜感激。感恩节快乐！

  ngOnInit() {
    this.title.setTitle(this.pageTitle);
    this.createFormControls();
    this.createForm();
  }

  createFormControls(): void {
    const mediumRegex = new RegExp('(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})');

    this.email = new FormControl('', Validators.compose([Validators.required, Validators.email]));
    this.firstName = new FormControl('', Validators.compose([Validators.required]));
    this.lastName = new FormControl('', Validators.compose([Validators.required]));
    this.password1 = new FormControl('', Validators.compose([Validators.required, Validators.pattern(mediumRegex)]));
    this.password2 = new FormControl('', Validators.compose([Validators.minLength(8), Validators.required, Validators.pattern(mediumRegex)]));

    console.log(this.email);
  }

  matchPassword(AC: AbstractControl): any {
    const password1 = AC.get('password1').value; // to get value in input tag
    const password2 = AC.get('password2').value; // to get value in input tag
    if (password1 !== password2) {
      // console.log('false');
      AC.get('password2').setErrors({'MatchPassword': true});
      // console.log(AC);
      // console.log(this.registrationForm);
    } else {
      // console.log('true');
      return null;
    }
  }

  createForm(): void {

    this.registrationForm = this.fb.group({
      email: this.email,
      firstName: this.firstName,
      lastName: this.lastName,
      password1: this.password1,
      password2: this.password2,
    }, {
      validator: this.matchPassword // your validation method
    });
  }

Answer 1

基本上你没有看到所有的验证结果，因为这一行

AC.get('password2').setErrors({'MatchPassword': true});

由于您要覆盖表单验证器，该行将删除之前的验证结果并只放置其结果。

我之前在类似情况下所做的是定义一个嵌套表单组来包装这些密码控件，并将我的自定义验证器函数仅分配给它。所以您的表单声明将如下所示：

this.registrationForm = this.fb.group({
  email: this.email,
  firstName: this.firstName,
  lastName: this.lastName,
  passwords: this.fb.group({
    password1: this.password1,
    password2: this.password2
  }, {validator: this.matchPassword}) // your validation method})
});

我准备了一个 plunker 来更好地说明如何达到每个案例的验证错误（只需点击提交即可查看结果）https://plnkr.co/edit/94VUlt8K5SvWXBGcW6Qx

Angular 2 个表单：无法访问 FormControl 错误

Angular 2 Forms: Unable to Access FormControl Errors

angular2-forms

angular