在FormArray中点击新增按钮时仅启用当前项的Secret Key字段

问题核心是所有项共用了同一个禁用状态变量，导致新增时触发全局状态变更，激活所有旧项。要实现仅当前新增项启用，需让每个FormGroup的Secret Key字段独立维护自身的禁用状态。

实现步骤 #

1. 创建独立的FormGroup（默认禁用Secret Key）
   在初始化或编辑加载数据时，为每一条数据创建FormGroup，并默认禁用Secret Key控件：

   // 初始化表单或加载已有数据时
   initItemForm(data?: any): FormGroup {
     return this.fb.group({
       name: [data?.name || '', Validators.required],
       secretKey: [{ 
         value: data?.secretKey || '', 
         disabled: true // 默认禁用
       }, Validators.required]
     });
   }
   
   // 组件初始化时加载已有数据示例
   ngOnInit(): void {
     const existingItems = this.loadExistingData(); // 假设从接口获取已有数据
     existingItems.forEach(item => {
       this.itemsArray.push(this.initItemForm(item));
     });
   }
   

2. 新增时仅启用当前项的Secret Key
   点击新增按钮时，创建新的FormGroup后，单独启用该组内的Secret Key控件，再加入FormArray：

   addNewItem(): void {
     const newItem = this.initItemForm();
     // 仅启用当前新增项的secretKey
     newItem.get('secretKey')?.enable();
     this.itemsArray.push(newItem);
   }
   

3. 模板中绑定表单控件
   模板里直接绑定每个FormGroup的控件，无需额外全局变量控制禁用，依赖FormControl自身状态：

   <div formArrayName="items">
     <div *ngFor="let item of itemsArray.controls; let i = index" [formGroupName]="i">
       <input formControlName="name" placeholder="Name">
       <input formControlName="secretKey" placeholder="Secret Key">
       <button (click)="removeItem(i)">删除</button>
     </div>
   </div>
   <button (click)="addNewItem()">+ 新增</button>
   

关键说明 #

• 每个FormGroup的secretKey控件都有独立的disabled状态，互不干扰；
• 已有数据加载时保持禁用，新增时单独启用当前项的控件，完全符合需求；
• 避免使用全局布尔变量（如isSecretKeyEnabled）控制所有项的禁用状态，这是导致批量激活的根本原因。

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