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)

I suggest you to create a custom validator that compares valOfPass and valOfRePass. — N.F.
– N.F., Commented Jun 8, 2021 at 7:32
@N.F.Please post your answer/working code with custom validator — Muhammad Bilal
– Muhammad Bilal, Commented Jun 8, 2021 at 19:11

Owen Kelvin · Accepted Answer · 2021-06-11 06:02:45Z

1

+50

You have a few options available.

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

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

answered Jun 11, 2021 at 6:02

Owen Kelvin

15.1k11 gold badges51 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JanRecker Over a year ago

I would opt for the custom validator. Just removing errors means, that all other types of validation errors you may have added (like a minimum length), would be removed too.

Owen Kelvin Over a year ago

@JanRecker Not entirely true. If you check I have applied the validator on the addForm. So only that FormGroup is affected. The children formGroup are not affected, You can check the updated demo. I have added a minLength of 3

Muhammad Bilal Over a year ago

@OwenKelvin it is working, can you please describe what is "get" before function name "valOfPass()"?

Owen Kelvin Over a year ago

get here has been used as a getter to "get" the property "valOfPass". This was my approach to make the demo work but in your case you may have used a different approach. Also I think you may need to have a look at some articles to understand the concept of "getters and setters" e.g here w3schools.com/js/js_object_accessors.asp

Ahmed Shehatah · Accepted Answer · 2021-06-15 01:27:18Z

1

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

edited Jun 15, 2021 at 1:27

answered Jun 14, 2021 at 13:37

Ahmed Shehatah

6685 silver badges11 bronze badges

2 Comments

Muhammad Bilal Over a year ago

thank you for the answer. Can you please help with working code?

Ahmed Shehatah Over a year ago

Dear Mr. @MuhammadBilal, I edited my answer and added a code example on [stackblitz.com]. I hope this fulfills your inquiry. I wish the best

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related