Angular5模板驱动表单初始禁用与按钮启用问题

嘿，我之前也踩过这个坑！Angular的模板驱动表单可不能直接给<form>标签绑[disabled]或者[attr.disabled]来控制整体禁用状态——这俩方法只会改DOM属性，根本同步不到Angular表单内部的状态管理系统，所以看起来就像没生效一样。

既然你已经拿到了表单的引用，那咱们直接操作表单的内部状态就好，步骤很简单：

1. 确保正确获取NgForm引用 #

如果还没给表单加模板引用，先补上：

<form #myForm="ngForm">
  <!-- 你的表单控件，记得给每个控件加name和ngModel -->
  <div>
    <label>用户名：</label>
    <input type="text" name="username" ngModel>
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" name="email" ngModel>
  </div>
  <button type="submit">提交</button>
</form>

<!-- 用来启用表单的按钮 -->
<button (click)="turnOnForm(myForm)">启用表单</button>

2. 初始禁用表单 #

在组件里，我们可以用ViewChild获取表单实例，然后在视图初始化完成后禁用它（避免初始化时机问题）：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-your-form-component',
  templateUrl: './your-form-component.component.html'
})
export class YourFormComponent implements AfterViewInit {
  // 通过模板引用获取表单实例
  @ViewChild('myForm') private formRef!: NgForm;

  ngAfterViewInit(): void {
    // 视图初始化完成后，禁用整个表单
    this.formRef.form.disable();
  }

  // 点击按钮启用表单的方法
  turnOnForm(form: NgForm): void {
    form.form.enable();
  }
}

为什么之前的方法没用？ #

Angular的NgForm内部封装了FormGroup，所有控件的禁用/启用状态都是由这个FormGroup统一管理的。直接修改DOM的disabled属性，Angular表单根本“不知道”这个变化，所以控件还是能正常交互。而调用form.disable()/form.enable()会递归处理所有子控件，同步更新内部状态和DOM属性，这才是真正的禁用/启用。

如果你的组件里已经拿到了表单的引用，直接调用它的form.disable()和form.enable()就行，不用再折腾DOM属性啦！

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