Angular 11如何使用反应式表单验证confirmPassword与密码相同

Question

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {

  registerationForm: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
    this.registerationForm = new FormGroup({
      userName : new FormControl(null, Validators.required),
      email : new FormControl(null, [Validators.required, Validators.email]),
      password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword : new FormControl(null, [Validators.required]),
      mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, this.passwordMatchingValidatior);
  }
  passwordMatchingValidatior(fg: FormGroup): Validators{
    return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {notmatched: true};
  }
  onSubmit(){
    console.log(this.registerationForm);
  }
}

错误信息 错误：src/app/user/user-register/user-register.component.ts:24:5 - 错误 TS2322：类型 '{ notmatched: boolean; } | null' 不可分配给类型'Validators'。 类型“null”不可分配给类型“Validators”。

24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {不匹配: true};

错误：src/app/user/user-register/user-register.component.ts:24:61 - 错误 TS2531：对象可能为“null”。

24 return this.registerationForm.get('password').value === this.registerationForm.get('confirmPassword').value ? null : {不匹配: true};

Answer 1

根据角度文档 - 向反应式表单添加交叉验证

创建您的验证器

export const passwordMatchingValidatior: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  return password?.value === confirmPassword?.value ? null : { notmatched: true };
};

并更新表单组验证器

this.registerationForm = new FormGroup({
      userName: new FormControl(null, Validators.required),
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword: new FormControl(null, [Validators.required]),
      mobile: new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, { validators: passwordMatchingValidatior });

Answer 2

尝试这些改变。

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {

  registerationForm: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
    this.registerationForm = new FormGroup({
      userName : new FormControl(null, Validators.required),
      email : new FormControl(null, [Validators.required, Validators.email]),
      password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword : new FormControl(null, [Validators.required]),
      mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, this.passwordMatchingValidatior);
  }

  passwordMatchingValidatior(form: FormGroup): null => {
     const password = form.controls['password'].value;
     const confirmation = form.controls['confirmPassword'].value;

     if (!password || !confirmation) { // if the password or confirmation has not been inserted ignore
       return null;
     }
     
     if (confirmation.length > 0 && confirmation !== password) {
       confirmation.setErrors({ notMatch: true }); // set the error in the confirmation input/control
     }

     return null; // always return null here since as you'd want the error displayed on the confirmation input
  }

  onSubmit(){
    console.log(this.registerationForm);
  }
}

Answer 3

在表单组本身（而不是表单控件中）创建新的验证器

validateAreEqual

和引用：

import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';

public newForm: FormGroup | any;

ngOnInit(): void {
  this.newForm = new FormGroup({
    password: new FormControl(null, [Validators.required]),
    confirm: new FormControl(null, [Validators.required])
  }, {validators: this.validateAreEqual})
}

public validateAreEqual(c: AbstractControl): { notSame: boolean } | null {
  return c.value.password === c.value.confirm ? null : { notSame: true };
}

然后，如果您愿意，您可以稍后显示错误：

<span class="error-text" *ngIf="newForm.get('confirm').touched &&  newForm.errors['notSame']">Password mismatch</span>