如何在单次提交时验证多个相同Form组件的全部实例

核心问题 #

当前写法存在3个逻辑错误：

• 存储表单实例的数组定义在form-component内部的onSubmit方法中，每个组件实例有独立的方法作用域，每次只能拿到当前单个表单实例，数组长度永远为1
• 提交触发逻辑写在子表单组件内部，每次触发只能操作当前点击的单个组件，无法联动其他同类型表单实例
• forEach方法中的return不会终止循环也不会给外层方法返回校验结果，现有校验逻辑本身也无法判断所有表单是否全部合法

解决方案 #

1. 父组件统一管理全局提交逻辑，收集所有子表单实例

父组件HTML中给子表单添加模板引用，全局提交按钮放在父组件层：

<div *ngFor="let person of persons | keyvalue">
  <form-component #personForm [person]="person.value"></form-component>
</div>
<button (click)="handleGlobalSubmit()">提交所有表单</button>

父组件TS中通过@ViewChildren获取所有子表单实例：

import { ViewChildren, QueryList } from '@angular/core';
import { FormComponent } from './form-component/form-component.component'; // 替换为你的子组件实际路径

export class ParentComponent {
  @ViewChildren('personForm') personForms: QueryList<FormComponent>;

  handleGlobalSubmit() {
    // 遍历校验所有子表单
    const isAllValid = this.personForms.every(formItem => {
      formItem.form.markAllAsTouched();
      return !formItem.form.invalid;
    });

    if (isAllValid) {
      // 所有表单校验通过，执行提交逻辑
      console.log('全部校验通过，可提交');
      // 如需收集所有表单值，直接遍历取值即可
      const allValues = this.personForms.map(formItem => formItem.form.value);
    } else {
      console.log('存在校验不通过的表单');
    }
  }
}

2. 调整子表单组件的属性访问权限

确保子表单的form属性为公开可访问，也可单独封装通用校验方法更符合规范：

// form-component.ts 代码
import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'form-component',
  templateUrl: './form-component.component.html'
})
export class FormComponent {
  @Input() person: any;
  // 设为public父组件才可直接访问
  public form: FormGroup;

  constructor(private builder: FormBuilder) {
    this.form = this.builder.group({
      name: new FormControl('', [Validators.required]),
    })
  }

  // 封装校验方法，父组件调用更简洁
  public validate(): boolean {
    this.form.markAllAsTouched();
    return !this.form.invalid;
  }
}

封装后父组件的校验逻辑可简化为：

const isAllValid = this.personForms.every(formItem => formItem.validate());

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