I have a reactive form created in component and some formControls
defined on it.
Now i need to disable one of the radio button from a radio button group based on some condition.
How do i do it while creating formControl
?
PFB the code snippet:
createForm() {
this.heroForm = this.fb.group({
confirmActionRadioGrp: this.fb.group({
updateAction: new FormControl({ value: '' })
})
});
}
inside my template:
<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input type="radio" class="custom-control-input" value="1" formControlName="updateAction">
<input type="radio" class="custom-control-input" value="2" formControlName="updateAction">
<input type="radio" class="custom-control-input" value="3" formControlName="updateAction"></div>
Now how to disable one of them conditionally? when using [disable]
attribute i get some warning in browser console. Angular doesn't encourage doing it
Ignore the browser warning and use the disabled attribute on the input. If you'd like you can use :
[attr.disabled]="whatever"
instead which should silence the warning. Angular reactive forms do not currently support disabling individual radio buttons in a group through the formcontrol / formgroup API as per this open issue: