Angular表单中动态新增input字段时如何禁用之前的输入字段

我们可以通过Angular响应式表单+可编辑索引标记的方式实现需求，具体逻辑和代码如下：

• 用FormArray存储所有动态生成的input对应的表单控件，同时声明一个editableIndex变量标记当前允许编辑的字段索引。
• 点击添加按钮时，先把editableIndex更新为即将新增的字段的位置（也就是当前FormArray的长度），再往FormArray中插入新的表单控件。
• 模板中遍历FormArray渲染input时，给每个input绑定readonly属性，当遍历索引不等于editableIndex时就启用只读状态。

组件逻辑代码（.ts） #

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

@Component({
  selector: 'app-dynamic-input-form',
  templateUrl: './dynamic-input-form.component.html'
})
export class DynamicInputFormComponent {
  dynamicForm: FormGroup;
  // 初始值可以根据需求调整，设为0默认第一个字段可编辑，设为-1默认所有字段初始只读
  editableIndex: number = -1;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      inputList: this.fb.array([])
    });
  }

  get inputFormArray(): FormArray {
    return this.dynamicForm.get('inputList') as FormArray;
  }

  addNewInput(): void {
    // 先更新可编辑索引为新增字段的位置
    this.editableIndex = this.inputFormArray.length;
    // 插入新的空表单控件
    this.inputFormArray.push(new FormControl(''));
  }
}

模板代码（.html） #

<form [formGroup]="dynamicForm">
  <ng-container formArrayName="inputList">
    <div *ngFor="let control of inputFormArray.controls; let idx = index">
      <input 
        type="text"
        [formControlName]="idx"
        [readonly]="idx !== editableIndex"
      >
    </div>
  </ng-container>
  <!-- 新增按钮，你可以替换为自己的图标组件 -->
  <button type="button" (click)="addNewInput()">➕ 添加字段</button>
</form>

• 如果后续需要支持修改历史字段，只需要给每个字段加一个编辑按钮，点击时把editableIndex赋值为对应字段的索引即可。
• 如果需要区分只读和可编辑样式，直接给input[readonly]编写专属CSS即可。

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