Angular动态表单：动态增删字段及选项异常问题求助

问题根源 #

你当前的实现中，所有动态字段共享了同一个选项集合，导致切换下拉类型或新增规则组时，所有字段的选项被同步修改。需要为每个规则组单独维护独立的选项数组。

具体修改步骤 #

1. 调整表单结构，为每个规则组添加独立选项FormArray
   修改addRule方法，让每个规则组自带独立的选项数组：

   addRule() {
     this.rulesForm.push(
       this.fb.group({
         type: ['input'],
         value: [''],
         options: this.fb.array([]) // 每个规则组专属的选项数组
       })
     );
   }
   

2. 修改类型切换逻辑，仅更新当前规则组的选项
   实现onTypeChange方法，针对当前索引的规则组处理选项：

   onTypeChange(index: number) {
     const ruleGroup = this.rulesForm.at(index) as FormGroup;
     const type = ruleGroup.get('type')?.value;
     const optionsArray = ruleGroup.get('options') as FormArray;
   
     optionsArray.clear();
     if (type === 'select') {
       // 给当前规则组添加初始选项
       optionsArray.push(this.fb.control('Rule 0'));
     }
   }
   

3. 添加/删除选项的方法，针对指定规则组操作

   addOption(ruleIndex: number) {
     const optionsArray = this.rulesForm.at(ruleIndex).get('options') as FormArray;
     optionsArray.push(this.fb.control(`Rule ${optionsArray.length}`));
   }
   
   removeOption(ruleIndex: number, optionIndex: number) {
     const optionsArray = this.rulesForm.at(ruleIndex).get('options') as FormArray;
     optionsArray.removeAt(optionIndex);
   }
   

4. 更新模板，绑定每个规则组的独立选项数组
   在循环渲染规则组时，使用当前组的options FormArray：

   <div formArrayName="rules" *ngFor="let rule of rulesForm.controls; let i = index">
     <div [formGroupName]="i">
       <select formControlName="type" (change)="onTypeChange(i)">
         <option value="input">输入框</option>
         <option value="select">带选项输入框</option>
       </select>
   
       <ng-container *ngIf="rule.get('type')?.value === 'input'">
         <input formControlName="value" placeholder="输入值">
       </ng-container>
   
       <ng-container *ngIf="rule.get('type')?.value === 'select'">
         <div formArrayName="options">
           <div *ngFor="let opt of rule.get('options')?.controls; let j = index">
             <input [formControlName]="j" placeholder="选项">
             <button (click)="removeOption(i, j)">删除</button>
           </div>
           <button (click)="addOption(i)">添加选项</button>
         </div>
       </ng-container>
   
       <button (click)="removeRule(i)">删除规则组</button>
     </div>
   </div>
   

原理说明 #

通过为每个规则组分配独立的options FormArray，确保每个字段的选项集合相互隔离，切换类型或新增组时只会影响当前操作的规则组，不会全局同步修改所有字段的选项。

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