DisabledControlDirective for Reactive Forms

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
 
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});

export class ReactiveFormWarningComponent implements OnInit {
  disabledName = false;
  form: FormGroup;
 
  constructor(private fb: FormBuilder) {}
 
  ngOnInit() {
    this.form = this.fb.group({
      name: [''],
    });
  }
}

<button (click)="disabledName = !disabledName">Toggle name state</button>
<form [formGroup]="form">
  <input
    class="form-control"
    type="text"
    formControlName="name"
    [disabled]="disabledName"
  />
</form>

this.form = this.fb.group({
  name: [{ value: '', disabled: false }],
});

this.form.get('name').enable();
this.form.get('name').disable();

import { Directive, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
 
@Directive({
  selector: '([formControlName], [formControl])[disabledControl]',
})
export class DisabledControlDirective {
  @Input() set disabledControl(state: boolean) {
    const action = state ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }
 
  constructor(private readonly ngControl: NgControl) {}
}

<form [formGroup]="form">
  <input type="text" formControlName="name" [disabledControl]="disabledName" />
</form>