Angular如何校验*ngFor动态生成的带校验规则的输入字段有效性

你之前在循环里写的#ng_price[i]="ngModel"这种带动态索引的模板引用写法，本身不符合Angular模板的解析规则——模板引用变量是编译阶段静态识别的标识符，不支持动态数组形式的索引命名，所以编译器根本找不到对应的ng_price实体，自然会报“不存在”的错误，没法直接通过原来单字段的写法把动态字段的校验状态拼到按钮的禁用条件里。

最小改动适配现有代码的方案 #

不用大改已经写好的模板逻辑，只需要批量收集所有循环生成字段的校验状态即可：

• 调整循环块里的模板引用命名，去掉动态索引，所有循环生成的输入统一用同一个引用名#ng_price="ngModel"

  <ng-container *ngFor="let qp of myQuoted.quoteQuantityPrice; let index = i;">
    <td>
      <input #ng_price="ngModel" 
             class="number" 
             type="number" 
             pattern="[1-9]*" 
             [(ngModel)]="qp.price" 
             required>
    </td>
  </ng-container>
  

• 在组件TS类里，通过@ViewChildren批量捕获所有匹配到的ng_price实例：

  // 引入Angular表单相关的依赖
  import { ViewChildren, QueryList, NgModel } from '@angular/core';
  
  // 批量获取所有循环生成的价格输入的ngModel实例
  @ViewChildren('ng_price') dynamicPriceInputs!: QueryList<NgModel>;
  

• 写一个通用的判断逻辑，只要任意一个动态输入校验不通过，就返回禁用状态：

  // 统一判断所有动态价格字段的有效性
  get hasAnyDynamicPriceInvalid(): boolean {
    // 动态字段还没渲染完成时，默认禁用保存按钮避免误操作
    if (!this.dynamicPriceInputs?.length) return true;
    // 遍历所有动态输入，只要有一个校验不通过就触发禁用
    return this.dynamicPriceInputs.some(input => input.invalid);
  }
  

• 把这个判断逻辑拼到原来按钮的禁用条件里即可：

  <button 
    [disabled]="
      ng_supplier.invalid 
      || ng_inventory.invalid 
      || ng_leadWeeks.invalid 
      || ng_multOrderQty.invalid 
      || ng_minOrderQty.invalid
      || hasAnyDynamicPriceInvalid
    " 
    (click)="Save()">
    Save
  </button>
  

更适合长期维护的规范写法 #

如果后续动态字段的数量、校验规则会频繁调整，直接用响应式表单的统一状态管理会更省心，不用单独维护模板引用的收集逻辑：

• 在组件初始化阶段，把动态价格字段和原有静态字段一起纳入表单实例管理，每个动态字段自动挂上必填、正则的校验规则：

  import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
  
  constructor(private fb: FormBuilder) {}
  
  // 初始化整体表单结构
  quotedForm = this.fb.group({
    // 原有静态字段的校验配置
    supplier: ['', Validators.required],
    inventory: ['', Validators.required],
    leadWeeks: ['', Validators.required],
    multOrderQty: ['', Validators.required],
    minOrderQty: ['', Validators.required],
    // 动态价格字段的数组容器
    priceList: this.fb.array([])
  });
  
  // 便捷获取动态价格数组的getter
  get priceList() {
    return this.quotedForm.get('priceList') as FormArray;
  }
  
  // 初始化时根据已有的报价数据，批量生成带校验的动态表单项
  initDynamicPriceControls() {
    this.myQuoted.quoteQuantityPrice.forEach(item => {
      this.priceList.push(
        this.fb.control(item.price, [
          Validators.required,
          Validators.pattern('[1-9]*')
        ])
      )
    })
  }
  

• 调整循环模板的绑定方式，直接关联表单数组的控件：

  <form [formGroup]="quotedForm">
    <ng-container formArrayName="priceList">
      <ng-container *ngFor="let control of priceList.controls; let i = index;">
        <td>
          <input 
            class="number" 
            type="number" 
            [formControlName]="i">
        </td>
      </ng-container>
    </ng-container>
  </form>
  

• 保存按钮的禁用状态直接绑定整个表单的有效性即可，不管是静态字段还是动态字段，只要任意一个校验不通过，表单的invalid状态就会为真：

  <button [disabled]="quotedForm.invalid" (click)="Save()">Save</button>
  

• 不要在模板引用变量里加动态索引，这类写法本身就不被Angular模板编译器支持，必然会报构建错误
• 用@ViewChildren收集动态输入的场景下，当循环的源数组（quoteQuantityPrice）发生增删操作时，QueryList会自动同步更新捕获的实例列表，不需要手动维护
• 现有的pattern="[1-9]*"搭配required校验，已经覆盖了“空值、格式不符合规则”的全部判断场景，不需要额外写自定义校验

内容的提问来源于stack exchange，提问作者b-anani