求助：Angular中动态启用/禁用Angular Material输入框的正确语法

你之前调用disable()方法时的参数写法错误，该方法不需要传入布尔值作为第一个参数，它的唯一参数是可选的配置对象（包含onlySelf、emitEvent等属性）。

正确用法 #

• 禁用输入框：
  可以直接调用无参的disable()方法：

  formControl.disable();
  

  或者根据需求传入配置对象：

  formControl.disable({ 
    onlySelf: true, // 仅当前控件状态变化，不影响父表单
    emitEvent: true // 触发状态变更事件（如statusChanges）
  });
  

• 启用输入框：
  对应使用enable()方法，用法和disable()一致：

  // 无参启用
  formControl.enable();
  // 带配置启用
  formControl.enable({ onlySelf: false });
  

完整示例 #

以下是结合Angular Material输入框的动态切换示例：

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

@Component({
  selector: 'app-input-toggle',
  template: `
    <mat-form-field appearance="fill">
      <input matInput [formControl]="demoInput" placeholder="可切换禁用状态">
    </mat-form-field>
    <button mat-raised-button (click)="toggleDisabled()">切换状态</button>
  `
})
export class InputToggleComponent {
  demoInput = new FormControl('默认内容');

  toggleDisabled() {
    this.demoInput.disabled ? this.demoInput.enable() : this.demoInput.disable();
  }
}

参数说明 #

• onlySelf：默认false，设为true时，控件状态变化不会向上传递给父表单组，仅作用于当前控件。
• emitEvent：默认true，设为false时，禁用/启用操作不会触发statusChanges或valueChanges事件。

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