Angular响应式表单：为何无法用formControlName绑定非input标签展示值？

核心原因 #

formControlName是Angular专门为响应式表单设计的指令，它能自动从父级的FormGroup/FormArray里找到对应名称的控件，完成绑定。但模板里的{{from}}是直接读取当前上下文的变量——你的组件类或循环上下文里根本没有叫from的变量，自然渲染不出来。

另外，FormArray是控件集合，每个子项一般是包含多个控件的FormGroup（比如你的from就是其中一个），你得先定位到具体的FormGroup实例，才能拿到里面from控件的值，不能直接跳级引用。

解决方法 #

方法1：循环时直接通过控件实例取值

先在组件类里把FormArray暴露成可访问的属性：

// 组件类代码
get emails(): FormArray {
  return this.myForm.get('emails') as FormArray;
}

然后在模板里循环FormArray的controls，对每个子FormGroup调用get('from')取值：

<div *ngFor="let emailGroup of emails.controls">
  <!-- 原input绑定正常工作 -->
  <input [formGroup]="emailGroup" formControlName="from">
  <!-- 渲染from的值 -->
  <div>{{ emailGroup.get('from').value }}</div>
</div>

方法2：用formGroupName配合模板变量

如果用formArrayName和formGroupName组织模板结构，可以通过模板变量获取当前FormGroup实例：

<div [formGroup]="myForm">
  <div formArrayName="emails">
    <div *ngFor="let _ of emails.controls; let i = index" 
         [formGroupName]="i" #currentForm="formGroup">
      <input formControlName="from">
      <div>{{ currentForm.form.get('from').value }}</div>
    </div>
  </div>
</div>

方法3：组件类封装取值方法（适合多次复用）

在组件类里写个方法，传入索引就能拿到对应from的值：

// 组件类代码
getFromValue(index: number): string | null {
  const emailGroup = this.emails.at(index) as FormGroup;
  return emailGroup.get('from')?.value;
}

模板里直接调用方法：

<div *ngFor="let _ of emails.controls; let i = index" [formGroupName]="i">
  <input formControlName="from">
  <div>{{ getFromValue(i) }}</div>
</div>

内容的提问来源于stack exchange，提问作者Dickens A S