因為會忘,所以要寫下來

Reactive Forms in Angular Disabled Warning ( 響應式表單 Disabled Warning )

2 minutes to read

Disabled Warning

當我們在使用 Angular Reactive Forms 時 如

<input [formControl]="formControl" [disable]="condition" />

用到 disable 時 console 會噴出以下警告訊息

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

Angular 官方是建議在 ts 檔裡處理,但某些時後 在 html 裡處理會比在 ts 裡處理還要來的簡潔 便利 如:

<input [formControl]="formControl" [disable]="isArr$ | async" />

有時後資料來源是 observe 在 template 裡可以直接使用 async 將資料 subscribe(訂閱) 出來

於是在網路上找到了兩個解法

解法一 屬性綁定

<input [formControl]="formControl" [attr.disable]="isArr$ | async" />

資料來源:

https://stackoverflow.com/questions/46790342/why-does-disabled-candisable-will-not-work-for-angular2-reactive-forms


解法二 新增 Directive (適用 Angular 9 以上版本)

  • Directive
import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appDisableControl], [disableControl]',
})
export class DisableControlDirective implements OnChanges {
  isDisabled: boolean;

  @Input() set disableControl(condition: boolean) {
    this.isDisabled = condition;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['disableControl']) {
      const action = this.isDisabled ? 'disable' : 'enable';
      this.ngControl.control[action]();
    }
  }

  constructor(private ngControl: NgControl) {}
}
  • html 引用
<input
  type="text"
  name="userName"
  formControlName="userName"
  appDisableControl
  [disableControl]="true"
/>

資料來源:

Disabling Form Controls When Working With Reactive Forms in Angular Directives not working with FormControl after upgrading to Angular 9

對這篇文章有什麼想法嗎?

Copyright © 2024 Mandy. All rights reserved. Build with Astro