FormBuilder中调用方法的多个验证器

问题描述

我创建一个注册表。 密码和电子邮件有两个字段。

在密码和电子邮件的第二个字段中，我想检查第一个字段是否与第二个字段相同。

如果我只检查一个，密码或电子邮件，它可以工作，但对两者都无效...

this.registerForm = this.formBuilder.group({
      email: '',[Validators.required,Validators.email],confirmEmail: '',[Validators.required],password: '',confirmPassword: '',},{
      validator: matchingFields('password','confirmPassword')
    });

如何添加第二个validator？

this.registerForm = this.formBuilder.group({
      email: '','confirmPassword'),// this doesn't work
      validator: matchingFields('email','confirmEmail')
    });

然后密码和电子邮件的方法（matchingFields）相同：

function matchingFields(field1,field2) {
  return form => {
    if (form.controls[field1].value !== form.controls[field2].value) {
      return {mismatchedFields: true};
    }
  };
}

我找不到validator的任何解决方案，仅是Validators.required的解决方案，但这不是我的问题。谢谢您的帮助

解决方法

用于生成表单组的语法不正确

正确的语法应该是

this.fb.group({
    control: ['value',[Validator1,Validator2,...]]
})

在您的情况下，这看起来像

function confirmed(field: string) {
  const confirmField = 'confirm' + field.replace(/(^|\s)\S/g,t => t.toUpperCase() );
  return form => {
    if (form.get(field).value !== form.get(confirmField).value) {
      return { ['mismatched-' + field]: true };
    }
  };
}

@Component({
  selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private formBuilder: FormBuilder) {}
  name = "Angular " + VERSION.major;
  registerForm = this.formBuilder.group(
    {
      email: ["[e-mail]",[Validators.required,Validators.email]],confirmEmail: ["[e-mail]",[Validators.required]],password: ["Password@1",confirmPassword: ["Password@1",[Validators.required]]
    },{
      validators: [confirmed("password"),confirmed("email")]
    }
  );
}

示例HTML

<hello name="{{ name }}"></hello>
<form [formGroup]='registerForm'>
    <input formControlName='email'> {{ registerForm.get('email').status}} <br>
    <input formControlName='confirmEmail'> {{ registerForm.get('confirmEmail').status}} <br>
    <input formControlName='password'> {{ registerForm.get('password').status}}<br>
    <input formControlName='confirmPassword'> {{ registerForm.get('confirmPassword').status}}<br>
</form>

    Password Confirmed Error: <strong>{{ registerForm.getError('mismatched-password')}}</strong> <br>
Email Confirmed: <strong>{{ registerForm.getError('mismatched-email')}}</strong>

    <h1>{{ registerForm.status }}</h1>

See sample on stackblitz