Angular 16响应式表单FormControl禁用失效求助

问题说明 #

在Angular 16开发响应式表单时，遇到如下问题：

• 需求：勾选"Not Phone"复选框时，禁用手机号输入框以阻止数据输入
• 当前问题：使用[disabled]结合formControlName时无法实现禁用效果；移除formControlName后输入框可禁用，但无法获取输入数据

原代码 #

HTML代码

<form [formGroup]="personelForm">
  <div class="row">
    <mat-checkbox class="example-margin" formControlName="isCheck">Not Phone</mat-checkbox> <br>
  </div>

  <div class="row">
    <mat-form-field style="margin-right: 10px;">
      <mat-label>Phone</mat-label>
      <input matInput type="number" formControlName="phone" 
        [disabled]="personelForm.get('isCheck').value">
    </mat-form-field>

    <mat-form-field style=" margin-right: 10px;">
      <mat-label>Name</mat-label>
      <input matInput type="text" formControlName="name">
    </mat-form-field>

    <mat-form-field style="margin-right: 10px;">
      <mat-label>Surname</mat-label>
      <input matInput type="text" formControlName="surname" >
    </mat-form-field>
  </div>
</form>

TypeScript代码

personelForm: FormGroup;

constructor(private fb: FormBuilder){}
reloadForm() {
  this.personelForm = this.fb.group({
    isCheck:  new FormControl(false),
    phone: new FormControl(0),
    name:  new FormControl(''),
    surname:  new FormControl('')
  });
}

ngOnInit() {
  this.reloadForm();
}

解决方案 #

Angular响应式表单的状态管理应通过表单控件自身API实现，而非模板中的[disabled]指令。我们可以监听isCheck控件的值变化，动态设置手机号控件的启用/禁用状态。

修改后的TypeScript代码 #

personelForm: FormGroup;

constructor(private fb: FormBuilder){}

reloadForm() {
  this.personelForm = this.fb.group({
    isCheck: new FormControl(false),
    phone: new FormControl(0),
    name: new FormControl(''),
    surname: new FormControl('')
  });

  // 监听复选框状态变化，同步控制手机号输入框状态
  this.personelForm.get('isCheck')?.valueChanges.subscribe(isChecked => {
    const phoneControl = this.personelForm.get('phone');
    isChecked ? phoneControl?.disable() : phoneControl?.enable();
  });
}

ngOnInit() {
  this.reloadForm();
}

修改后的HTML代码（移除模板[disabled]指令） #

<form [formGroup]="personelForm">
  <div class="row">
    <mat-checkbox class="example-margin" formControlName="isCheck">Not Phone</mat-checkbox> <br>
  </div>

  <div class="row">
    <mat-form-field style="margin-right: 10px;">
      <mat-label>Phone</mat-label>
      <input matInput type="number" formControlName="phone">
    </mat-form-field>

    <mat-form-field style=" margin-right: 10px;">
      <mat-label>Name</mat-label>
      <input matInput type="text" formControlName="name">
    </mat-form-field>

    <mat-form-field style="margin-right: 10px;">
      <mat-label>Surname</mat-label>
      <input matInput type="text" formControlName="surname" >
    </mat-form-field>
  </div>
</form>

说明 #

• 通过valueChanges订阅复选框状态变化，确保状态切换时立即同步手机号输入框的启用/禁用状态
• 使用表单控件原生的disable()/enable()方法，既符合Angular响应式表单设计规范，又保留formControlName以正常获取输入数据

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