Angular表单数组仅显示标签不显示输入框问题排查

核心问题分析 #

1. 表单控件绑定错误：HTML中formControlName="i"是固定字符串，未绑定到循环的索引变量，无法关联表单数组中对应的控件。
2. 表单数组初始为空：构造函数仅初始化空数组，未添加任何初始表单控件，页面加载时无元素可渲染。
3. 缺少控件操作方法：addContact_Emails和removeContact_Emails方法未实现，无法新增或删除文本框。

代码调整方案 #

1. 修正HTML模板的控件绑定 #

将formControlName="i"改为[formControlName]="i"，绑定到循环索引变量：

<div class="form-group col-md-9">
   <label for="name">LOB Contact(s)</label>
       <div formArrayName="contact_emails">
          <div *ngFor="let contact of contact_emails.controls; let i=index;">
             <textarea [formControlName]="i" style="width:90%;"></textarea>                            
             <button type="button" class="btn btn-primary btn-xs" 
                        (click)="addContact_Emails()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              </button>                            
              <button type="button" *ngIf="i>0" class="btn btn-danger btn-xs" 
                        (click)="removeContact_Emails(i)">
                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
              </button>                         
             </div>
            </div>
           </div>

2. 调整组件类逻辑（含构造函数） #

import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

export class AppComponent {
  appForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单组时，为contact_emails添加至少一个初始控件
    this.appForm = this.fb.group({      
      contact_emails: this.fb.array([this.createEmptyEmailControl()]),
    });
  }

  get contact_emails() {
    return this.appForm.get('contact_emails') as FormArray;
  }

  // 封装单个邮箱控件的创建逻辑
  private createEmptyEmailControl(): FormControl {
    return this.fb.control('');
  }

  // 实现添加邮箱控件方法
  addContact_Emails(): void {
    this.contact_emails.push(this.createEmptyEmailControl());
  }

  // 实现移除邮箱控件方法
  removeContact_Emails(index: number): void {
    this.contact_emails.removeAt(index);
  }
}

关键说明 #

• [formControlName]="i"通过属性绑定，将循环索引值与表单数组中对应位置的控件关联。
• 初始化时添加一个空控件，保证页面加载后默认显示一个文本框，用户可通过加号按钮新增更多。
• 封装createEmptyEmailControl方法，统一控件创建逻辑，避免重复代码。

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