I understand how we can specify the initial state of a reactive form control to be disabled.
someControl: [{value: '', disabled: true}]
How can I change the disable state at a later time, programmatically, based on a selection of another value in the form. So, e.g. someControl should be disabled if anotherControl has a certain value selected in a dropdown and enabled otherwise.
Thanks
You can watch for valueChanges with your select field, here's an example with a form with a dropdown and an input field that we will disable/enable based on value chosen from dropdown:
this.myForm = this.fb.group({
selects: [''],
inputField: ['']
})
// subscribe to changes in select field, if the value chosen is "two",
// disable input field, else enable field
this.myForm.get('selects').valueChanges.subscribe(val => {
if(val === 'two') {
this.myForm.get('inputField').disable()
}
else {
this.myForm.get('inputField').enable()
}
})
Here's a
As developer033 suggested, you can also use simple change event, where template...
<select formControlName="selects" (change)="checkValue()">
<option disabled></option>
<option *ngFor="let a of arr">{{a}}</option>
</select>
and component would be:
checkValue() {
if(this.myForm.get('selects').value === 'two') {
this.myForm.get('inputField').disable()
}
else {
this.myForm.get('inputField').enable()
}
}
valueChanges, I'd prefer to use (change) event on select.
this should work
this.someControl.reset({value: '', disabled: true});