RC 6 Reactive Forms doesn't support disabled binding

[naveedahmed1]

I recently upgraded my project to RC 6. In my app we are using Reactive Forms. Among form fields there is a field which needs to be conditionally disabled.

Prior to RC 6 we were able to achieve this by applying disabled like like this.

<input formControlName="myField" type="text" [disabled]="form.controls.otherField.value">

After upgrade when I browse to that component, I see below warning in console.

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

      Example: 
      form = new FormGroup({
        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
        last: new FormControl('Drew', Validators.required)
      });

I believe the the option to disable form field should be supported with Reactive Forms as well.

Currently to overcome this warning, we have to capture change event on otherField

(change)="onChange()"

onChange() {
        if (this.form.controls['otherField'].value) {
            this.form.controls['myField'].disabled = true;
        } else {
            this.form.controls['myField'].disabled = false;
        }
    }

[ericmartinezr]

#11271 (comment)

[kara]

This looks like a dupe of #11271.

[0cv]

@kara this issue is indeed a dupe, but #11271 is closed too. Shall it not be reopened, or are you not (re)considering to support the disabled attribute again?

[nildomacena]

You also can use the function enable() or disable()

[ravikumarbggit]

I could disable in the FormBuilder like this:

id:[{value:'1', disabled:true}]

However my problem is ngSubmit is not sending back value of this disabled field. it will be undefined for id

save(model : any ) : void {
this.countries = model.countries;
for(let c of this.countries){
console.log(c.id+':'+c.name+':'+c.deleted);
}
}

How can I access the value of disabled field?

Edit: I could find a workaround here

[choui]

ngOnChanges(changes){
if(this.isModify){
for(let prop in this.form.controls){
this.form.controls[prop].disable({onlySelf: true })
}
}else{
for(let prop in this.form.controls){
this.form.controls[prop].enable({onlySelf: true })
}
}
}
this is work for me

[chriso86]

This is pretty horrible.

[walhow]

choui's solution works fine! That said, I do wish there was a property in the view I could bind to, to avoid all the component code.

// works:
for(let prop in this.form.controls){
this.myForm.controls[prop].disable({onlySelf: true }) // or .enable(...)
}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}