Angular Reactive Form Disabled Control is not valid

Question

I thought that a disabled control would not get validated. But I'm facing this issue.

I have reproduced using the official Angular reactive form sample:

https://stackblitz.com/edit/angular-hyvj24?file=src/app/dynamic-form-question.component.ts

If you type something in the email field and focus out, this will trigger the change event in which I'm doing :

this.form.controls['firstName'].disable();

And although, firstname is NOT a required field, it gets validated and we see a red message. Without this line of code, firstName can be blank and we'll still be able to save.

Why is that ?

Answer 1

When you disabled a control, the control will be valid or not, is the form which is valid although the control is invalid. e.g.

form=new FormGroup({
    control1:new FormControl({value:null,disabled:true},Validators.required),
    control2:new FormControl()
  })

{{form.valid}} //true
{{form.get('control1').valid}}  //false

In your particular case you can change the function isValid for some like:

get isValid() {  
   return this.form.controls[this.question.key].disabled || 
          !this.form.controls[this.question.key].invalid; 
}

Updated Sorry, my bad, in the docs we can see that status can be

• VALID
• INVALID
• PENDING
• DISABLED

a form control is valid when status is valid -so if status is disabled valid is false. We need use the "oposite" of invalid

get isValid() {  
   return !this.form.controls[this.question.key].invalid; 
}

Answer 2

You are correct that .disable() would not get validated. From the official Angular documentation:

Disables the control. This means the control is exempt from validation checks and excluded from the aggregate value of any parent. Its status is DISABLED. If the control has children, all children are also disabled.

It is the check that is wrong. In the stackbiz it is:

get isValid() { return this.form.controls[this.question.key].valid; }

while it should be:

  get isValid() {
    return this.form.valid;
  }