angular 8: Reactive Form match password

问题:

I have the reactive form in my angular project that defines like this:

this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
});

how can I check the matching of password and confirmPassword?

回答1:

You can create a custom validator and use it in FormGroup like

    passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirmPassword').value) {
        return {invalid: true};
    }
}

And you need to use this custom validator like.

 this.createUserFormGroup = new FormGroup({
  'userName': new FormControl(null, [Validators.required, Validators.maxLength(256)]),
  'name': new FormControl(null, [Validators.required, Validators.maxLength(64)]),
  'roleNames': new FormArray([]),
  'password': new FormControl(null, [Validators.required, Validators.maxLength(32)]),
  'confirmPassword': new FormControl(null, [Validators.required])
},{validator: this.passwordConfirming});

and check in html like

 <span *ngIf="createUserFormGroup.errors?.invalid">
      Password doesn't match
  </span>

回答2:

I have straightaway used compare validator of @rxweb/reactive-form-validators without creating a custom function and writing too much code in the component.

Install:

npm i @rxweb/reactive-form-validators

I have compared confirmPassword field and by mentioning the fieldName parameter with it. Here is the component code.

 ngOnInit() {
    this.userFormGroup = this.formBuilder.group({
        password:['',], 
        confirmPassword:['', RxwebValidators.compare({fieldName:'password' })], 
    });
}

Here is the complete app.component.ts code where you can display the error message by declaring it globally like this.

ReactiveFormConfig.set({"validationMessage":{"compare":"Input does not match"}});

Here is the complete HTML code.

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Password</label>
      <input type="text" formControlName="password" class="form-control"  />
     <small class="form-text text-danger" *ngIf="userFormGroup.controls.password.errors">{{userFormGroup.controls.password.errors.compare.message}}<br/></small>    
    </div>
    <div class="form-group">
      <label>Confirm Password</label>
      <input type="text" formControlName="confirmPassword" class="form-control"  />
    <small class="form-text text-danger" *ngIf="userFormGroup.controls.confirmPasswossrd.errors">{{userFormGroup.controls.confirmPassword.errors.compare.message}}<br/></small>
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

Working Example