Angular 11大型模板驱动表单：高效统计非空输入占比实现方法

核心实现逻辑 #

所有使用ngModel绑定的模板驱动控件，会被Angular内置的NgForm服务自动统一收集到控件集合中，不需要手动遍历DOM查找控件，基于这个内置能力计算完成率的性能远高于自行扫描页面元素的方案。
计算规则对齐需求：完成率 = （满足非空判定的控件数量 / 表单内总有效控件数量），其中非空判定需要覆盖所有输入控件类型：

• 文本类输入（文本框、文本域、输入型下拉）：去除首尾空格后有内容才算非空
• 单选框组：存在选中值才算非空
• 多选/数组类输入（多选复选框组、多选下拉）：数组长度大于0才算非空
• 单个布尔型复选框：值为true才算非空
• 所有值为null、undefined、空字符串的情况均判定为未填写

具体代码实现 #

模板部分 #

给表单实例添加模板引用变量，实时渲染完成率：

<!-- 绑定ngForm指令，拿到表单实例引用 -->
<form #bigForm="ngForm">
  <!-- 所有带name属性的ngModel控件，都会被自动纳入计算 -->
  <input type="text" name="userName" ngModel>
  <input type="radio" name="gender" ngModel value="male">
  <input type="radio" name="gender" ngModel value="female">
  <input type="checkbox" name="isVip" ngModel>
  <select name="city" ngModel>
    <option [ngValue]="null">请选择城市</option>
    <option value="sh">上海</option>
  </select>

  <!-- 实时展示完成率 -->
  <div>表单完成进度：{{ completionRate | percent:'1.0-0' }}</div>
  <button type="submit" [disabled]="completionRate < 1">提交</button>
</form>

组件类部分 #

通过ViewChild拿到表单实例，订阅控件值变化触发计算，避免模板方法反复执行导致的性能损耗：

import { Component, OnDestroy, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-large-form',
  templateUrl: './large-form.component.html'
})
export class LargeFormComponent implements AfterViewInit, OnDestroy {
  // 拿到表单的模板引用
  @ViewChild('bigForm') bigForm!: NgForm;
  // 完成率数值，范围0-1
  completionRate = 0;
  private valueChangeSub?: Subscription;

  ngAfterViewInit(): void {
    // 视图初始化完成后先算一次初始值
    this.calcCompletionRate();
    // 订阅表单值变化，加300ms防抖适配大型表单的高频输入场景
    this.valueChangeSub = this.bigForm.form.valueChanges
      .pipe(debounceTime(300))
      .subscribe(() => {
        this.calcCompletionRate();
      });
  }

  // 核心计算逻辑
  private calcCompletionRate(): void {
    const allControls = Object.values(this.bigForm.controls);
    // 表单无控件时直接返回0
    if (allControls.length === 0) {
      this.completionRate = 0;
      return;
    }

    // 统计非空有效输入的数量
    const filledCount = allControls.filter(control => {
      const currentValue = control.value;
      // 空值基础判断
      if (currentValue === null || currentValue === undefined) return false;
      // 字符串类型判断
      if (typeof currentValue === 'string') return currentValue.trim().length > 0;
      // 数组类型判断
      if (Array.isArray(currentValue)) return currentValue.length > 0;
      // 布尔、数字等其他类型直接判定为已填写
      return true;
    }).length;

    this.completionRate = filledCount / allControls.length;
  }

  ngOnDestroy(): void {
    // 退订防止内存泄漏
    this.valueChangeSub?.unsubscribe();
  }
}

自定义校验联动方案 #

如果需要把控件本身的校验规则纳入完成率计算，不需要拆分单独逻辑，直接在非空判断的过滤条件里增加控件有效性判断即可：

// 调整filledCount的过滤逻辑，把校验不通过的控件算成未完成
const filledCount = allControls.filter(control => {
  const currentValue = control.value;
  // 原有非空判断
  if (currentValue === null || currentValue === undefined) return false;
  if (typeof currentValue === 'string') return currentValue.trim().length > 0;
  if (Array.isArray(currentValue)) return currentValue.length > 0;
  // 增加校验有效性判断：值非空但格式不对（比如手机号格式错误），也算未完成
  return control.valid;
}).length;

基于这个逻辑可以实现的能力：

• 提交按钮自动禁用：完成率未达100%时按钮不可点
• 未填写字段自动高亮：计算时给未通过校验的控件调用markAsTouched()，自动触发Angular内置的校验提示样式
• 分模块完成率统计：如果用了ngModelGroup把大表单拆成模块，直接拿到对应分组的控件集合做同样的计算逻辑，就能输出每个模块的完成进度

常见注意事项 #

• 所有带ngModel的控件必须显式添加name属性，否则不会被NgForm纳入控件集合，导致计算的总控件数偏少
• 被*ngIf隐藏的控件会被自动从NgForm的控件集合中移除，不需要额外写逻辑判断控件显隐，天然适配动态表单场景
• 不要把计算完成率的方法直接写在模板插值里（比如{{calcCompletionRate()}}），每次变更检测都会触发全量计算，大型表单下会造成明显的性能卡顿
• 表单引用要在ngAfterViewInit生命周期中获取，不要在ngOnInit阶段直接读取ViewChild绑定的表单实例，否则会拿到undefined导致计算报错

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