Angular 15响应式表单中[attr.disabled]=true失效问题

在Angular 15中，响应式表单对控件状态的处理逻辑做了调整，直接通过[attr.disabled]绑定的方式会被表单控件自身的状态覆盖，导致失效。正确的做法是通过操作表单控件实例的disable()和enable()方法来控制禁用状态，这也是响应式表单的标准用法。

具体实现步骤： #

1. 组件类中操作表单控件
   在组件里获取目标表单控件，根据disableField的值调用对应的方法来切换禁用状态：

   import { FormBuilder, FormGroup } from '@angular/forms';
   import { Input, SimpleChanges, OnChanges } from '@angular/core';
   
   export class YourComponent implements OnChanges {
     @Input() disableField: boolean;
     myForm: FormGroup = this.fb.group({
       targetField: ['']
     });
   
     constructor(private fb: FormBuilder) {}
   
     ngOnChanges(changes: SimpleChanges) {
       // 监听disableField的变化，同步更新控件状态
       if (changes['disableField']) {
         const control = this.myForm.get('targetField');
         this.disableField ? control?.disable() : control?.enable();
       }
     }
   }
   

2. 模板中移除[attr.disabled]绑定
   模板里只需正常绑定表单控件即可，无需额外添加attr.disabled属性：

   <form [formGroup]="myForm">
     <input formControlName="targetField" type="text">
   </form>
   

补充优化方式： #

• 如果需要在组件初始化时就设置禁用状态，可以在ngOnInit中直接调用方法：

  ngOnInit() {
    if (this.disableField) {
      this.myForm.get('targetField')?.disable();
    }
  }
  

• 也可以通过属性setter监听disableField变化，替代ngOnChanges：

  private _disableField = false;
  
  @Input() set disableField(value: boolean) {
    this._disableField = value;
    const control = this.myForm.get('targetField');
    this._disableField ? control?.disable() : control?.enable();
  }
  
  get disableField(): boolean {
    return this._disableField;
  }
  

内容的提问来源于stack exchange，提问作者Joya