angular: Disabled input considered as invalid in dynamic form

Problem is that the boolean member valid has to be true or false.

Sure. But it will be false. Same goes for invalid

So if you want to be able to consider disabled input you have to check if the input is disabled before checking its control, it seems a bit strange to me that you have to check if the input is enabled before checking its control,

Or use alternative (more sensible, IMO) approach: http://plnkr.co/edit/9Xjg7fmWE3kFavVcS7Dx?p=preview

the control should be valid if it is disabled,

That’s not the current design. I will let @kara comment more but here is my thinking: if a control is disabled a user can’t interact with it. Since a user can’t interact with the control it can’t change control’s value. So what is the point of validating sth that can’t happen?

I can see 2 different design (disabled and valid / invalid being separate flags) but I don’t think one is necessarily better than the other.

what’s the purpose of the disabled parameter passed to FormControl’s constructor?

My understanding is that it means “make the control initially” enabled / disabled depending on the flag. Once again, there is no point of kicking off validation if a user can’t interact with the control. The whole purpose of validation is to determine if user’s input is valid or not. If we’ve got no input we can’t talk about validation result really.

A control that is disabled is … well - disabled. It is not considered valid or invalid.

Problem is that the boolean member valid has to be true or false. So if you want to be able to consider disabled input you have to check if the input is disabled before checking its control, it seems a bit strange to me that you have to check if the input is enabled before checking its control, the control should be valid if it is disabled, else, what’s the purpose of the disabled parameter passed to FormControl’s constructor?

PS: Thank you @VirrageS , I assumed that the commit was fixing my issue without actually checking that it was fixing it…

Hmmm, I agree with @pkozlowski-opensource , so i’d like to show you my case scenario here, please have a look to the GIF bellow.

In this case i want to give user the ability to select address automatically using checkbox, Reactive form updated by using patchValue() method, then I used disabled method to prevent any changes from the user UI.

the problem I always get valid: false so I thing that if the field is disabled, the valid flag should be true to prevent showing up validation error as my small bar on the right popup.

Also i have to mention that this field is Validators.required but even after updating it’s value and disable it i get valid: false which is weird!!

As @pkozlowski-opensource mentioned, this is by design. There are four mutually-exclusive statuses:

VALID: control has passed all validation checks INVALID: control has failed a validation check PENDING: control is in the midst of conducting a validation check DISABLED: control is exempt from validation checks

Like in native HTML5 forms, disabled controls are not considered when calculating the value or validity of their parent form. As such, they are exempt from validation, and it doesn’t make sense to mark the individual control as valid or invalid. If we were to do that, we’d break the model where a parent’s status is simply a reduction of the statuses of its children. Currently, a parent group is invalid if any of its children are invalid. If the individual control was allowed to be disabled and invalid, you’d get the following confusing behavior:

this.form.get('login').status           // INVALID
this.form.status                        // INVALID

this.form.get('login').disable();

this.form.get('login').status           // INVALID
this.form.status                        // VALID

You might want to take a look at the doc for disabled controls for more info: https://docs.google.com/document/d/1k_iYcgTS1cDJkyXvBWQZGPlkWZhEqAVphC0xyKSAqPs/preview

ReadOnly is not the same as Disabled. The Disabled status will add some style showing the user that control isn’t usable. While the ReadOnly control is displayed the same as Editable control. Therefore using ReadOnly isn’t a good workaround.

In your case, I think the “readonly” work around is ok as it’s not really disabling the previous answers that you need but making sure that the user can’t change them…

I haven’t found a proper workaround this yet but still hope the angular team will propose some solution…