Angular模板驱动表单中访问ng-template内嵌表单控件值时出现错误的问题排查

你遇到的问题核心在于Angular模板驱动表单的静态编译机制：当使用*ngTemplateOutlet动态渲染ng-template时，模板内的ngModel控件不会自动注册到父表单引用f中。

Angular在编译模板时，会静态分析哪些表单控件属于哪个NgForm实例——只有在form标签直接或静态嵌套的模板内容里的ngModel，才会被自动关联到对应的表单。而ng-template是动态渲染的，编译时它的内容不在父表单的静态结构中，因此Angular不会自动把里面的控件注册到f这个表单实例里，导致你访问f.controls.formInput时找不到对应的控件，从而报错。

下面提供两种可行的解决方法，你可以根据场景选择：

方法1：手动将控件注册到表单（适合简单场景） #

通过*ngTemplateOutlet的context参数把父表单实例传递给模板，然后在模板内手动调用表单的addControl()方法，将ngModel控件注册到表单中：

<form #f="ngForm"> 
  <!-- 把表单实例传递给模板 -->
  <ng-container *ngTemplateOutlet="template; context: { form: f }"></ng-container> 
  <!-- 使用安全导航符?.避免控件未注册时的报错 -->
  {{f.controls.formInput?.value}} 
  
  <ng-template #template let-form="form"> 
    <div class="reusable-control"> 
      <input ngModel name="formInput" #inputCtrl="ngModel"> 
    </div>
    <!-- 手动注册控件到表单 -->
    <ng-container *ngIf="form">
      {{form.addControl(inputCtrl)}}
    </ng-container>
  </ng-template> 
</form>

方法2：封装成子组件（推荐，符合组件化思想） #

把可复用的表单控件封装成独立子组件，在子组件内部注入父表单NgForm，然后手动将控件注册到表单中：

子组件代码（reusable-input.component.ts） #

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

@Component({
  selector: 'app-reusable-input',
  template: `
    <div class="reusable-control">
      <input ngModel name="formInput" #inputCtrl="ngModel">
    </div>
  `
})
export class ReusableInputComponent implements OnInit {
  // 获取模板中的ngModel控件引用
  @ViewChild('inputCtrl') inputCtrl!: NgModel;

  // 注入父表单实例
  constructor(private ngForm: NgForm) { }

  ngOnInit(): void {
    // 将控件注册到父表单
    this.ngForm.addControl(this.inputCtrl);
  }
}

父组件模板 #

<form #f="ngForm"> 
  <app-reusable-input></app-reusable-input>
  <!-- 现在可以正常访问控件值了 -->
  {{f.controls.formInput?.value}} 
</form>

这种方法的优势在于：控件的复用性更强，逻辑封装在组件内部，父组件无需关心注册细节，更符合Angular的最佳实践。

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