Angular动态添加输入框：无法指定formControlName与placeholder问题

Got it, let's break down what's going wrong here and fix it step by step. The core issue is that you're using the placeholder text as the dynamic key for your FormGroup controls—but in your template, you can't easily grab that dynamic key to set formControlName and placeholder. Here's how to fix this properly:

第一步：调整FormGroup结构（让数据逻辑更清晰） #

Instead of using the placeholder text as the control's key (which makes it hard to access in the template), let's restructure each item in the FormArray to explicitly store both the placeholder text and the user's input. This makes your template logic straightforward and maintainable.

Update your TypeScript code like this:

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
// ...其他必要导入

@Component({
  // ...组件元数据
})
export class YourComponent {
  addForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.addForm = this.formBuilder.group({
      items: this.formBuilder.array([]),
      placeholdervalue: ""
    });
  }

  addLink() { 
    const placeholdervalue = this.addForm.get("placeholdervalue").value; 
    const items = this.addForm.get("items") as FormArray; 
    // 传入占位符文本，创建结构清晰的FormGroup
    items.push(this.createItem(placeholdervalue)); 
    // 清空输入框，方便下次输入新的占位符
    this.addForm.get('placeholdervalue').setValue('');
    console.log(this.addForm.get("items")); 
  } 

  createItem(placeholdervalue: string): FormGroup { 
    // 每个item包含两个控件：存储输入值的inputValue，存储占位符的placeholder
    return this.formBuilder.group({
      inputValue: [''],
      placeholder: [placeholdervalue]
    });
  }

  // 可选：添加删除输入框的功能（提升用户体验）
  removeItem(index: number) {
    const items = this.addForm.get("items") as FormArray;
    items.removeAt(index);
  }
}

第二步：修改模板绑定逻辑 #

Now that each item has explicit controls for the input value and placeholder, you can easily bind them in your template:

<!-- 动态生成的输入框列表 -->
<div class="row"> 
  <div class="col-md-3" formArrayName="items" *ngFor=" let item of addForm.get('items').controls; let i = index " > 
    <div [formGroupName]="i"> 
      <mat-form-field class="example-full-width"> 
        <!-- 绑定固定的formControlName，占位符从item的placeholder控件取值 -->
        <input matInput 
               formControlName="inputValue" 
               [placeholder]="item.get('placeholder').value" /> 
      </mat-form-field>
      <!-- 可选：添加删除按钮 -->
      <button mat-icon-button (click)="removeItem(i)" color="warn">
        <mat-icon>delete</mat-icon>
      </button>
    </div> 
  </div> 
</div>

<!-- 输入占位符文本的区域 -->
<div class="row mt-2">
  <div class="col-md-3">
    <mat-form-field class="example-full-width">
      <input matInput formControlName="placeholdervalue" placeholder="输入占位符文本" />
    </mat-form-field>
    <button mat-icon-button (click)="addLink()" color="primary">
      <mat-icon>add</mat-icon>
    </button>
  </div>
</div>

为什么这个方案更好？ #

Your original approach used dynamic keys for controls, which works for creating the FormArray but makes template access messy (you'd have to use Object.keys(item.controls)[0] to grab the key, which is fragile if you ever add more controls to the FormGroup). By explicitly storing the placeholder as a separate control, you make your code more readable, maintainable, and less prone to bugs.

如果你坚持用原有的动态键方式（不推荐） #

If you really want to keep using the placeholder text as the control key, you can modify the template like this—but again, this is not ideal for long-term maintenance:

<input matInput 
       [formControlName]="Object.keys(item.controls)[0]" 
       [placeholder]="Object.keys(item.controls)[0]" />

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