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\', disable         


        

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:

2 - If it's a FormControl:

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