Change angular11 form validation status when using FormGroup, FormBuilder and Validators

Question

onblurRePass(event:any){
    this.valOfRePass = this.empProperties.repassword;
    console.log("Pass Val: "+this.valOfPass + " RePass Val: "+this.valOfRePass);

    if(this.valOfPass == this.valOfRePass){
      this.matchPassword = 'matched';
      this.addForm.status = 'VALID'; // need to change this status
    }
    else{
      this.matchPassword = 'unmatched';
      this.addForm.status = 'INVALID';  //need to change this status
    }
  }

Error: Cannot assign to 'status' because it is a read-only property.ts(2540)

Answer 1

You have a few options available.

1. A form is invalid if it has errors so you can simply use setErrors() to update the form

  onblurRePass() {
    this.valOfRePass = this.empProperties.repassword;
    console.log(
      'Pass Val: ' + this.valOfPass + ' RePass Val: ' + this.valOfRePass
    );

    if (this.valOfPass == this.valOfRePass) {
      this.matchPassword = 'matched';
      this.addForm.setErrors(null)
    } else {
      this.matchPassword = 'unmatched';
       this.addForm.setErrors({'mismatched': true})
    }
  }

Sample Demo

2. The other option is to simply use a custom validator password and confirm password field validation angular2 reactive forms

Answer 2

The best way to achieve this, is to create a custom validator and use it on the FormGroup({}) itself not on the FormControl() of the password.

This validator directive class takes the two FormControl()s as input and checks for their values if they match or not. So the validator must be on a higher level than the two FormControl()s that it is validating.

I hope this is well informative and helpful for your situation.

here's the example