angular中input标签中的disabled不生效

当使用 disabled 属性和 formControlName 结合使用时，disabled 属性不会起作用。

formControlName 是 Angular 中的一个指令，用于绑定表单控件，并自动处理表单控件的状态和值。当使用 formControlName 绑定一个表单控件时，它将负责控制该控件的禁用状态。

如果想禁用一个已经通过 formControlName 绑定的表单控件，可以使用 disable() 方法来实现：

import {
    
     Component } from '@angular/core';
import {
    
     FormControl } from '@angular/forms';

@Component({
    
    
  selector: 'my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myControl" [disabled]="isDisabled">
      <button (click)="toggleDisabled()">Toggle Disabled</button>
    </form>
  `
})
export class MyComponent {
    
    
  myForm: FormGroup;
  isDisabled: boolean = false;

  constructor() {
    
    
    this.myForm = new FormGroup({
    
    
      myControl: new FormControl()
    });
  }

  toggleDisabled() {
    
    
    if (this.isDisabled) {
    
    
      this.myForm.get('myControl').enable();
    } else {
    
    
      this.myForm.get('myControl').disable();
    }
    this.isDisabled = !this.isDisabled;
  }
}

通过 myForm.get('myControl') 来获取通过 formControlName 绑定的表单控件，并使用 enable() 和 disable() 方法来切换其禁用状态。当点击 “Toggle Disabled” 按钮时，isDisabled 属性会切换其值以实现禁用和启用控件的效果。