表单组的表单数组，获取精确特定控件的更改 - 角度

Question

我的表单结构如下..

this.myForm =  this.formBuilder.group({
 control1: this.formBuilder.control({value: ''}),
 groupcontrol1: this.formBuilder.array({ this.addGroupControl() });
});


addGroupControl(): FormGroup {
   return this.formBuilder.group({
     recurringControl1: this.formBuilder.control({value: ''}),
     recurringControl2: this.formBuilder.control({value: ''}),
     recurringControl3: this.formBuilder.control({value: ''}),
    });
  });

我在 html 中有一个按钮，可以将组添加到这个数组中，看起来像这样

addGroups() {
    (<FormArray>this.myForm.get('groupcontrol1')).push(this.addGroupControl());
  }

这是我的html表单

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label> control1    </label>
  <input type="text"/>
  <button type="button" (click)="addGroups()"> Add Groups</button>
  <accordion>
    <accordion-group formArrayName="groupcontrol1"
      *ngFor="let group of myForm.get('groupcontrol1').controls; let i = index">
      <div accordion-heading>
        Group Control {{ i + 1 }}
      </div>
    <div [formGroup]="i">
      <input formControlName="recurringControl1" />
      <input formControlName="recurringControl2" />
      <input formControlName="recurringControl3" />
    </div>
    </accordion-group>

  </accordion>
</form>

现在对于每个循环控件，我需要通知哪个循环控件值以哪种形式更改，为此我使用下面的代码

 merge(
      ...this.myForm
        .get('groupcontrol1')
        .controls.map((eachGroup, index: number) =>
          eachGroup.controls.recurringControl1.valueChanges
           .pipe(map((value) => ({ rowIndex: index, control: eachGroup, data: value })))
        )
    ).subscribe((changes) => {
      console.log(changes);
    });

使用上面的代码，我得到了recurringControl1 从第一个表单 grous 的值变化，而不是其他表单组。 基本上只有当行索引为 0 时，才获取该值

对上述代码的任何修改或建议，以准确获取 3 个循环控件值中的哪个控件已更改

Answer 1

我认为您的问题是在订阅更改后在 groupcontrol1 中创建新的 FormGroups 条目。

我认为你需要这样的东西：

export class AppComponent {
  myForm;
  myArray;
  trigger = new BehaviorSubject(null);
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      control1: fb.control('defaultvalue'),
      groupcontrol1: fb.array([this.addGroupControl()])
    });

    this.myArray = this.myForm.get('groupcontrol1');
    this.myArray.push(this.addGroupControl());

    this.trigger
      .pipe(
        switchMap(t => {
          const obs = this.myArray.controls.map((c, k) => {
            return c.valueChanges.pipe(map(data => ({ data, i: k })));
          });
          return merge(...obs);
        })
      )
      .subscribe(x => {
        console.log(x);
      });
  }

  addGroupControl(): FormGroup {
    return this.fb.group({
      recurringControl1: this.fb.control('1'),
      recurringControl2: this.fb.control('2'),
      recurringControl3: this.fb.control('3')
    });
  }

  newRow() {
    this.myArray.push(this.addGroupControl());
    this.trigger.next(null);
  }
}

https://stackblitz.com/edit/angular-ivy-faqvw9?file=src/app/app.component.ts