I have a select control that I want to disable dynamically based on a condition:
this.activityForm = this.formBuilder.group({
docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required]
});
However, docType doesn't become enabled even though at some point this.activeCategory becomes 'document'.
How do I fix this?
Since I don't know how you're manipulating activeCategory (maybe it's also a FormControl?), I'll suggest the following approach:
You can use (change) to detect when this.activeCategory has changed, as below:
1 - If you're using ngModel:
<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)">
2 - If it's a FormControl:
<input type="text" formControlName="activeCategory" (change)="checkValue($event)">
So, in component, you can manipulate the docType control using disable/enable methods:
checkValue(event: Event) {
const ctrl = this.activityForm.get('docType');
if (event.value === 'document') {
ctrl.enable();
} else {
ctrl.disable();
}
}
activeCategory is changed would need to call for checkValue() manually. You're assuming that activeCategory may only be edited by the input it's on (which seems to have been the case since OP accepted the answer), but then this wouldn't work in a scenario where it's edited from other functions or components.You have to handle select elements differently than you do other HTML elements. You will have to perform a reset when this.activeCategory changes.
Something like this:
this.activityForm.controls['docType'].reset({ value: '2', disabled: false });
Of course, you will probably want to use the current value, rather than a hard coded '2'.
Same sort of thing to disable it, if that need arises (and it probably will).
this.activityForm.controls['docType'].reset({ value: '2', disabled: true });
More information on ng form control reset.
setValue or patchValue?
setValue and patchValue are for changing the form controls value, not visual state.from .ts file you can add keys to yours from controls, and there you add the item disabled:true (desactivate form item) or false (activate form item)
.ts
public form_name=new FormGroup({
series: new FormControl({value: '', disabled: true}),
inten: new FormControl({value: '', disabled: true}),
rep: new FormControl({value: '', disabled: true}),
rest: new FormControl({value: '', disabled: false}),
observation: new FormControl({value: '', disabled: false}),
});
.html
<form [formGroup]="form_name" >
<label for="series" >Series</label>
<input type="text" formControlName="series" >
<label for="inten" >Inten</label>
<input type="text" formControlName="inten" >
<label for="rep" >Rep</label>
<input type="text" formControlName="rep" >
<label for="rest" >rest</label>
<textarea formControlName="rest" rows="3" cols="30" ></textarea>
</form>
this.activityForm.controls['docType'].disable();
you can use ternary operator here to disable form control conditionally.
this.activityForm = this.formBuilder.group({
docType: [{ value: '2', disabled: this.activeCategory != 'document' ? true : false }, Validators.required]
});
? true : false added on top of a statement that's already a boolean. Please consider giving an actual solution, as OP wants the change to be dynamic (which neither their original code nor yours is).