Angular 5中禁用表单输入字段的正确方法咨询

嘿，我注意到你在尝试用模板绑定[disabled]来禁用表单输入，但这其实不是Angular Reactive Forms推荐的做法——直接在模板里操作禁用状态会绕过表单控件的内部状态管理，很容易导致控件状态和表单实例不同步，出现一些难以排查的bug。

先给你纠正两个小问题，再给出标准的实现方式：

1. 先修正组件类里的验证器写法 #

你写的email控件验证器有个小错误：同步验证器需要放在同一个数组里，第三个参数是留给异步验证器的，所以要改成这样：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// ...
this.form = this._formBuilder.group({
  name: ['', Validators.required],
  // 同步验证器放在一个数组中
  email: ['', [Validators.required, Validators.email]]
});

2. 移除模板里的[disabled]和[(ngModel)] #

Reactive Forms不需要ngModel，formControlName已经足够绑定控件；同时不要用[disabled]，改用表单控件实例的方法来控制状态：

<form [formGroup]="form">
  <input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off">
  <input class="form-control" placeholder="Email" name="email" formControlName="email" autocomplete="off">
  
  <!-- 示例触发按钮 -->
  <button (click)="toggleFormDisabled()">
    {{ isDisabled ? '启用表单' : '禁用表单' }}
  </button>
</form>

3. 在组件类中通过API控制禁用状态 #

在事件触发的方法里，调用表单组或单个控件的disable()/enable()方法，这才是Reactive Forms的标准操作：

export class YourComponent {
  form: FormGroup;
  isDisabled = false;

  constructor(private _formBuilder: FormBuilder) {
    this.initForm();
  }

  initForm(): void {
    this.form = this._formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  // 触发禁用/启用的事件方法
  toggleFormDisabled(): void {
    this.isDisabled = !this.isDisabled;
    if (this.isDisabled) {
      // 禁用整个表单组
      this.form.disable();
      // 如果只想禁用单个控件：this.form.get('name')?.disable();
    } else {
      // 启用整个表单组
      this.form.enable();
      // 单个控件启用：this.form.get('name')?.enable();
    }
  }
}

为什么要这么做？ #

Reactive Forms的核心是组件类管理表单状态，模板只负责渲染。直接用[disabled]会让控件的实际状态（FormControl实例中的状态）和模板显示状态脱节，比如表单提交时，控件实例可能还是“启用”状态，但模板显示是禁用的，导致数据处理出现异常。用官方提供的disable()/enable()方法，能保证表单状态的一致性。

内容的提问来源于stack exchange，提问作者João Ghignatti