Angular响应式表单：FormArrayName与ng-template结合失效问题求助

问题出在ngTemplateOutlet的上下文隔离上：默认情况下，模板内容不会继承父级的formGroupName表单上下文，导致里面的formControlName找不到对应的FormGroup，所以绑定失效。

下面给两种实用的解决方案：

方案1：手动传递FormGroup到模板（兼容所有Angular版本） #

把当前循环里的FormGroup实例作为上下文参数传给模板，在模板内部显式绑定，这样不管是在FormArray里还是普通FormGroup下都能复用：

<div formArrayName="credentials" *ngFor="let creds of forArr.controls.credentials?.controls; let i = index">
  <ng-container [formGroupName]="i">
    <!-- 把当前FormGroup作为隐式上下文传给模板 -->
    <ng-container *ngTemplateOutlet="x; context: { $implicit: creds }"></ng-container>
  </ng-container>

  <ng-template #x let-formGroup>
    <!-- 显式绑定传入的FormGroup -->
    <ng-container [formGroup]="formGroup">
      <input placeholder="Username" formControlName="username" />
      <input placeholder="Password" formControlName="password" />
    </ng-container>
  </ng-template>
</div>

普通FormGroup场景复用示例：

<!-- 直接传入单个FormGroup实例即可复用模板 -->
<ng-container *ngTemplateOutlet="x; context: { $implicit: yourSingleCredsForm }"></ng-container>

方案2：开启上下文继承（Angular 14+可用） #

如果你的项目用的是Angular 14或更高版本，可以直接开启inheritContext属性，让模板继承父级的表单上下文，代码更简洁：

<div formArrayName="credentials" *ngFor="let creds of forArr.controls.credentials?.controls; let i = index">
  <ng-container [formGroupName]="i">
    <!-- 开启上下文继承，模板就能直接用父级的formGroupName上下文 -->
    <ng-container *ngTemplateOutlet="x; inheritContext: true"></ng-container>
  </ng-container>

  <ng-template #x>
    <input placeholder="Username" formControlName="username" />
    <input placeholder="Password" formControlName="password" />
  </ng-template>
</div>

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