Angular嵌套表单场景下如何校验来自外部模板的输入表单有效性

实现步骤 #

1. 修改StepsComponent模板 #

给每个嵌套的子表单添加模板引用，绑定NgForm指令用于获取表单实例：

<form #mainForm="ngForm">
  <ng-container *ngFor="let step of steps">
    <form #stepForm="ngForm">
      <ng-container [ngTemplateOutlet]="step.getTemplateRef()"></ng-container>
    </form>
  </ng-container>
</form>

2. 组件类中实现校验逻辑 #

通过@ViewChildren获取所有子表单的NgForm实例，遍历校验所有表单有效性：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-steps',
  // 其余组件配置
})
export class StepsComponent {
  // 获取所有子表单的NgForm实例
  @ViewChildren('stepForm') stepForms: QueryList<NgForm>;

  /**
   * 校验所有步骤表单有效性
   * @returns 所有表单都有效返回true，否则返回false
   */
  validateAllSteps(): boolean {
    const isAllValid = this.stepForms.toArray().every(form => form.valid);
    
    // 校验不通过时，标记所有控件为已触碰，触发校验提示
    if (!isAllValid) {
      this.stepForms.forEach(form => {
        Object.values(form.controls).forEach(control => {
          control.markAsTouched();
        });
      });
    }

    return isAllValid;
  }
}

3. 修正调用方模板写法 #

Angular模板驱动表单中，使用ngModel必须搭配name属性，否则表单无法正常识别控件，你的调用示例需要补全所有input的name属性：

<app-steps>
  <ng-template [step]="1">
    <p>Step-1</p>
    <input type="text" required name="testModel" [ngModel]="testModel" />
  </ng-template>
  <ng-template [step]="2">
    <p>Step-2</p>
    <input type="text" required name="testModel2" [ngModel]="testModel2" />
    <input type="text" required name="testModel3" [ngModel]="testModel3" />
  </ng-template>
  <ng-template [step]="3">
    <p>Step-3</p>
    <input type="text" required name="testModel4" [ngModel]="testModel4" />
  </ng-template>
</app-steps>

拓展功能 #

获取所有表单的合并值 #

getAllFormValues(): Record<string, any> {
  return this.stepForms.toArray().reduce((result, form) => {
    return { ...result, ...form.value };
  }, {});
}

单步校验 #

如果需要按步骤校验，只需要通过索引获取对应步骤的NgForm实例单独校验即可：

validateStep(stepIndex: number): boolean {
  const stepForm = this.stepForms.toArray()[stepIndex];
  if (!stepForm) return false;
  
  if (!stepForm.valid) {
    Object.values(stepForm.controls).forEach(control => control.markAsTouched());
    return false;
  }
  return true;
}

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