RC 6 Reactive Forms doesn't support disabled binding
See original GitHub issueI 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;
}
}
Issue Analytics
- State:
- Created 7 years ago
- Reactions:23
- Comments:9 (2 by maintainers)
Top Results From Across the Web
angular - Reactive forms - disabled attribute - Stack Overflow
I have been using [attr.disabled] because I still like this template driven than programmatic enable()/disable() as it is superior IMO.
Read more >Disabling Form Controls When Working With Reactive Forms ...
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up...
Read more >Reactive forms - Angular
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and...
Read more >AngularJS: Developer Guide: Forms
The key directive in understanding two-way data-binding is ngModel. ... Note that novalidate is used to disable browser's native form validation.
Read more >Angular Form Builder and Validation Management - Cory Rylan
What you would need is Validators.require("firstNameRequired") but that feature that you pass a custom errorKey to the Validator does not exist, ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@kara this issue is indeed a dupe, but https://github.com/angular/angular/issues/11271 is closed too. Shall it not be reopened, or are you not (re)considering to support the disabled attribute again?
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