Angular响应式表单：如何显示未完成/无效字段数量

嘿，针对你的Angular响应式表单需求，我给你一套简单直接的实现方案：

步骤1：在组件中添加计算属性 #

在你的组件类里，新增一个getter来统计所有无效字段的数量。它会自动遍历表单的所有控件，过滤出不符合验证规则的项：

// 导入必要的表单类（如果还没导的话）
import { FormGroup, FormControl } from '@angular/forms';

export class YourComponent {
  quote: FormGroup;

  // 你的其他组件代码（比如表单初始化、post方法等）

  // 核心：获取无效字段总数
  get incompleteFieldCount(): number {
    // 把表单控件转为数组，过滤出invalid的控件，返回长度
    return Object.values(this.quote.controls).filter(ctrl => ctrl.invalid).length;
  }

  // 你已有的控件引用（保持不变）
  get quoteFormTitle() {
    return this.quote.get('quoteFormTitle') as FormControl;
  }

  get quoteFormFirstName() {
    return this.quote.get('quoteFormFirstName') as FormControl;
  }

  get quoteFormSurname() {
    return this.quote.get('quoteFormSurname') as FormControl;
  }
}

步骤2：在模板中绑定数值 #

把你模板里的<p>You have {{ x }} amount of questions remaining</p>替换成：

<p>You have {{ incompleteFieldCount }} fields remaining to complete correctly</p>

额外说明 #

• Angular的响应式表单会实时跟踪每个控件的valid/invalid状态，只要控件的验证状态变化（比如用户选了标题、输入了符合长度的名字），Angular的变更检测就会自动重新计算incompleteFieldCount的值，实现实时更新。
• 如果你的需求是只统计用户已经触碰过的无效字段（比如忽略还没点击过的必填项），可以修改过滤条件：

  get touchedIncompleteFields(): number {
    return Object.values(this.quote.controls).filter(ctrl => ctrl.touched && ctrl.invalid).length;
  }
  

这样就能完美实现你要的功能啦！

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