Angular 15模板驱动表单无ngModelGroupOptions？如何为分组设验证时机？

为什么模板驱动表单未提供ngModelGroup级别的updateOn支持 #

模板驱动表单的设计定位是快速构建简单表单，它更偏向声明式的极简用法，把复杂的表单控制逻辑封装在底层，只暴露最常用的配置项（比如表单级的ngFormOptions、控件级的ngModelOptions）。Angular团队在设计时判断，模板驱动场景下用户对分组级别的验证时机配置需求相对小众，因此没有专门提供ngModelGroupOptions这类配置项，而是优先保证核心场景的简洁性。

单独为ngModelGroup设置updateOn的实现方式 #

因为没有官方直接支持，我们可以通过两种方式实现分组级别的验证时机控制：

方式一：手动修改分组下控件的updateOn属性 #

通过模板引用变量获取ngModelGroup实例，在组件生命周期中遍历其下所有控件，统一修改updateOn属性为blur。

模板代码：

<form #myForm="ngForm">
  <div ngModelGroup="userInfo" #userGroup="ngModelGroup">
    <label>姓名：<input type="text" name="name" ngModel required></label>
    <label>邮箱：<input type="email" name="email" ngModel required email></label>
  </div>
</form>

组件代码：

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { NgModelGroup } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent implements AfterViewInit {
  @ViewChild('userGroup') userGroup!: NgModelGroup;

  ngAfterViewInit(): void {
    // 遍历分组下所有控件，设置验证触发时机为blur
    Object.values(this.userGroup.controls).forEach(control => {
      control.updateOn = 'blur';
    });
  }
}

方式二：自定义指令实现复用 #

如果需要在多个表单分组中复用这个逻辑，可以自定义一个指令，自动为ngModelGroup下的所有控件（包括嵌套分组内的控件）设置updateOn。

自定义指令代码：

import { Directive, Input, OnInit } from '@angular/core';
import { NgModelGroup, FormControl } from '@angular/forms';

@Directive({
  selector: '[ngModelGroup][updateOn]'
})
export class NgModelGroupUpdateOnDirective implements OnInit {
  @Input() updateOn!: 'change' | 'blur' | 'submit';

  constructor(private ngModelGroup: NgModelGroup) {}

  ngOnInit(): void {
    this.setUpdateOnForControls(this.ngModelGroup);
  }

  private setUpdateOnForControls(group: NgModelGroup): void {
    Object.values(group.controls).forEach(control => {
      if (control instanceof NgModelGroup) {
        // 递归处理嵌套分组
        this.setUpdateOnForControls(control);
      } else if (control instanceof FormControl) {
        // 设置单个控件的验证触发时机
        control.updateOn = this.updateOn;
      }
    });
  }
}

模板中使用指令：

<form #myForm="ngForm">
  <div ngModelGroup="userInfo" updateOn="blur">
    <label>姓名：<input type="text" name="name" ngModel required></label>
    <label>邮箱：<input type="email" name="email" ngModel required email></label>
    <!-- 嵌套分组内的控件也会自动应用blur触发验证 -->
    <div ngModelGroup="contact">
      <label>电话：<input type="tel" name="phone" ngModel required></label>
    </div>
  </div>
</form>

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