Angular中含ng-content的ngForm表单验证失效问题求助

问题原因 #

1. 投影的输入控件缺少name属性：Angular的ngModel必须配合name才能将控件注册到NgForm中，没有name的控件不会被表单纳入验证范围。
2. 子组件未正确关联投影控件到内部NgForm：默认情况下，投影控件会注册到父组件的ControlContainer（若存在），而非子组件内部的NgForm，导致子组件的表单实例无法获取控件的验证状态。

修复步骤 #

1. 给投影输入控件添加name属性 #

修改父组件中使用app-form-component的代码，为输入框添加name属性：

<app-form-component>
    <input [(ngModel)]="variable" name="variable" required minlength="3">
</app-form-component>

2. 修改子组件的ControlContainer配置 #

更新子组件的TypeScript代码，通过ViewChild获取内部NgForm实例，并将其作为ControlContainer提供，确保投影控件注册到子组件的表单中：

import { Component, ViewChild, NgForm } from '@angular/core';
import { ControlContainer } from '@angular/forms';

@Component({
  selector: 'app-form-component',
  template: `
    <form #form="ngForm">
      <ng-content></ng-content>
    </form>
  `,
  providers: [
    {
      provide: ControlContainer,
      useFactory: (component: FormComponent) => component.form,
      deps: [FormComponent]
    }
  ]
})
export class FormComponent {
  @ViewChild('form') form: NgForm;
}

原理说明 #

• @ViewChild('form')获取子组件模板中声明的NgForm实例，确保我们使用的是表单模板对应的实例。
• 自定义ControlContainer提供者通过工厂函数返回子组件的NgForm实例，让投影进来的控件自动继承这个容器，从而将控件的验证状态关联到子组件的表单上。
• 添加name属性后，ngModel才能将控件注册到NgForm，验证规则（required、minlength等）才会生效，表单的valid状态会根据控件状态正确更新。

内容的提问来源于stack exchange，提问作者Tomasz Fitał