Angular2 Reactive Forms - Disable form control dynamically from condition
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>
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();
}
}
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.