DisabledControlDirective to disable Reactive Form control

Reactive Forms warning

Khi làm việc với Reactive Forms thì các bạn có thể đã gặp qua warning sau:

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

Code mà trigger warning trên có dạng như sau:

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>

Và dĩ nhiên, Reactive Forms sẽ ngăn cái disabled attribute kia hoạt động đúng, bạn sẽ ko disable được input này.

Approach

Có một số cách giải quyết như sau:

1. Khai báo FormGroup như warning chỉ dẫn

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

2. Dùng FormControl.enable() hoặc FormControl.disable()

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

Hai cách trên đều hoạt động tốt nhưng lại khá bất cập nếu như bạn muốn điều khiển disable state của FormControl trên template như đoạn code bị warn lúc đầu tiên.

<input
  class="form-control"
  type="text"
  formControlName="name"
  [disabled]="disabledName"
/>

Directive approach

Vậy hướng giải quyết là gì? Câu trả lời là dùng một Directive.

Mình sẽ gọi là DisabledControlDirective nhé. Directive này chỉ được áp dụng khi dùng chung với formControlName directive hoặc formControl directive. Khi các bạn muốn disable một FormControl trên template, dùng [disableControl] thay thế cho [disabled] bình thường.

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) {}
}

Apply trên template sẽ có dạng

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

Source code

https://stackblitz.com/edit/angular-disable-reactive-form-control-directive?file=src/app/disabled-control.directive.ts