如何将表单作为Angular组件输入并关联内部字段到父表单？

我在Angular 16中实现了一个模板驱动表单，表单内包含一个直接声明的文本字段和提交按钮，同时引入了一个承载通用可复用表单字段的子组件，并将父表单引用作为输入传递给该组件。但目前子组件内的字段并未被纳入父表单的校验体系，导致这些字段无效时不会影响父表单的整体有效性。如何将组件内的输入字段与关联的父表单绑定？

解决方案 #

核心问题在于：直接传递NgForm实例无法让子组件内的ngModel自动注册到父表单。以下是两种可行的解决方法：

方法一：通过ControlContainer自动关联（推荐） #

让子组件通过依赖注入继承父表单的ControlContainer，这样内部的ngModel会自动注册到父表单，无需手动传递表单引用。

子组件TS代码修改

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

@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
  // 关键配置：继承父组件的ControlContainer
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class FormEditorComponent implements OnInit {
  fieldTwoVal = '';

  ngOnInit(): void {}
}

子组件HTML代码修改

移除对父表单输入的依赖，直接使用ngModel，表单状态会自动关联到父表单：

<label for="fieldTwo" class="control-label">Two (Inside Component)</label>
<input
  name="fieldTwo"
  id="fieldTwo"
  [ngClass]="{
    'is-invalid': fieldTwo.invalid && (fieldTwo.touched || ngForm.submitted)
  }"
  required
  [(ngModel)]="fieldTwoVal"
  #fieldTwo="ngModel"
  #ngForm="ngForm"
/>

<br />
<pre>component form.valid: {{ ngForm.valid }}</pre>
<pre>component form.value: {{ ngForm.value | json }}</pre>

父组件HTML代码修改

移除传递form输入的属性：

<form #myForm="ngForm" (ngSubmit)="submit(myForm)">
  <label for="fieldOne">One (directly in form)</label>
  <input
    type="text"
    id="fieldOne"
    name="fieldOne"
    [ngClass]="{
      'is-invalid': fieldOne.invalid && (fieldOne.touched || myForm.submitted)
    }"
    required
    #fieldOne="ngModel"
    [(ngModel)]="fieldOneVal"
  />

  <br /><br />

  <!-- 无需传递form输入 -->
  <app-form-editor></app-form-editor>

  <br />
  <button type="submit">Submit</button>
  <strong *ngIf="submitSuccess" class="text-success">Sucessfully submitted!</strong>

  <br />

  <pre>myForm.valid: {{myForm.valid}}</pre>
  <pre>myForm.value: {{myForm.value | json}}</pre>
</form>

方法二：手动注册NgModel到父表单 #

如果必须保留传递NgForm实例的方式，可以在子组件中手动将ngModel控件注册到父表单。

子组件TS代码修改

import { Component, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm, NgModel } from '@angular/forms';

@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
})
export class FormEditorComponent implements OnInit, AfterViewInit {
  @Input() form!: NgForm;
  @ViewChild('fieldTwo') fieldTwo!: NgModel;

  fieldTwoVal = '';

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    // 在视图初始化后手动将控件注册到父表单
    this.form.addControl(this.fieldTwo);
  }
}

这种方法需要注意生命周期时机，必须在ngAfterViewInit中执行注册操作，确保fieldTwo实例已经初始化完成。

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