Angular2 Reactive Forms - Disable form control dynamically from condition

Question

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?

Answer 1

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();
  }
}