Angular Material：表单外部保存按钮在必填字段为空时的禁用方案

问题描述 #

我因设计需求，将Close和Save按钮放置在Angular Material表单的外部div中，代码如下：

<h1 mat-dialog-title>Product Page</h1>
<div mat-dialog-content>
  <form [formGroup]="productForm">
    <mat-form-field appearance="outline">
      <mat-label>Name</mat-label>
      <input formControlName="name" required matInput placeholder="Name" style="text-transform:uppercase">
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Weight</mat-label>
      <input type="number" required formControlName="weight" matInput placeholder="weight">
    </mat-form-field>
  </form>
</div>
<div mat-dialog-actions [align]="'end'">
  <button mat-raised-button color="warn" mat-dialog-close>Close</button>
  <button mat-raised-button color="primary" (click)="saveProduct()">Save</button>
</div>

我希望当表单字段为空时禁用Save按钮，但由于按钮位于表单外部，required参数无法生效。请问是否有办法将按钮与表单关联，使得Save按钮在必填字段填写完成前保持禁用状态？

解决方案 #

这太常见啦，完全可以通过Angular响应式表单的状态来控制按钮，给你两种简单好用的方法：

1. 直接绑定表单的有效性状态

最简单的方式就是把按钮的[disabled]属性直接绑定到表单组的invalid状态。因为你用了响应式表单，表单组会自动根据你设置的验证器跟踪所有控件的有效性。

修改你的Save按钮代码：

<button mat-raised-button color="primary" (click)="saveProduct()" [disabled]="productForm.invalid">Save</button>

原理说明：

• 当任意必填字段为空（或验证不通过）时，productForm.invalid会是true，按钮就会被禁用；
• 等所有必填字段都填写正确后，表单状态变为valid，按钮会自动启用。

记得要在组件类里正确初始化表单组，给每个控件加上Validators.required验证器：

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

// ...

productForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.productForm = this.fb.group({
    name: ['', Validators.required],
    weight: ['', Validators.required]
  });
}

2. 监听表单状态变化（适合需要额外逻辑的场景）

如果你需要在表单状态变化时做更多处理（比如显示提示信息、记录日志等），可以订阅表单的statusChanges observable，用组件变量来控制按钮状态。

首先在组件里定义一个变量：

isSaveDisabled = true;

然后在ngOnInit里订阅表单状态变化：

ngOnInit(): void {
  // 先初始化表单
  this.productForm = this.fb.group({
    name: ['', Validators.required],
    weight: ['', Validators.required]
  });

  // 监听状态变化
  this.productForm.statusChanges.subscribe(status => {
    this.isSaveDisabled = status !== 'VALID';
    // 这里可以加额外逻辑，比如：
    // if (status === 'VALID') { console.log('表单可以提交啦！'); }
  });
}

最后把这个变量绑定到按钮上：

<button mat-raised-button color="primary" (click)="saveProduct()" [disabled]="isSaveDisabled">Save</button>

两种方法都很可靠，根据你的实际需求选就行！

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