如何在HTML视图中访问FormGroup值并实现按钮禁用逻辑

方案1：借助表单内置验证状态 #

如果你的FormGroup已经给必填字段配置了Validators.required验证器，直接用表单的valid/invalid状态就能控制按钮禁用逻辑：

<button type="submit" [disabled]="form.invalid">提交</button>

原理是当任何必填字段为空时，表单会自动标记为invalid，按钮随之处于禁用状态。

方案2：手动校验所有字段值 #

要是没配置验证器，可以自己写逻辑检查所有控件值是否为空：

1. 在组件类中添加判断方法：

checkFormIsEmpty(form: FormGroup): boolean {
  return Object.values(form.value).some(val => !val);
}

2. 在HTML模板中调用该方法控制按钮：

<button type="submit" [disabled]="checkFormIsEmpty(form)">提交</button>

这个方法会遍历表单所有值，只要存在空值、undefined或null，就返回true，按钮保持禁用。

方案3：结合dirty状态（可选） #

如果希望用户至少修改过表单内容才启用按钮，可以额外结合dirty状态判断：

<button type="submit" [disabled]="form.invalid || !form.dirty">提交</button>

form.dirty表示用户已修改过表单内容，能避免页面刚加载时按钮就处于可用状态的问题。

注意：子组件要正确接收父组件传入的FormGroup，需在组件类中声明输入属性：

@Input() form!: FormGroup;

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