Angular2 react 形式 : syncing FormArray with parent FormGroup

Question

我正在使用 FormArrays 来处理可变长度的对象数组。虽然我当前的实现大部分都有效，但在验证方面我遇到了一个问题，因为对我的 FormArray 所做的任何更改都不会传播到它的“父”FormGroup...或者至少不会自动传播 FormGroup 的值可以 通过更改由所述 FormGroup 管理的另一个控件的值来更新。

在这一点上，我无法判断我的实现是否有问题，或者我是否期待一些我不应该期待的事情......无论最后“问题”是什么，我都会很乐意接受此时的任何输入。

Plunker 链接:https://plnkr.co/edit/PLslyJo1YOszGwTpujyx(Angular版本为2.0.1)

Plunker 中 app.ts 顶部的评论详细说明了重现问题的步骤(或者无论如何对我来说是什么问题)。

由于 SO 在链接到 Plunker 时需要一些代码，因此这里是与 FormGroup 和 FormArray 的定义有关的行

this.form = this.fb.group({
        "size":[0, Validators.required],
        "someArray": this.fb.array(this.initFormArray(0), Validators.required),
        "someOtherField":[null]
});

initFormArray(size:number):FormGroup[]{
  let newFormArray:FormGroup[] = [] ;

  for(let i = 0 ; i < size ; i++){
    newFormArray.push(this.fb.group({
      fieldA: [null, Validators.required],
      fieldB: [null, Validators.required]
  })); 
}

  return newFormArray;
}

updateFormArray(value:string){
  let newSize:number = parseInt(value) ;

  if(newSize >= 0){
    this.form.controls["someArray"] = this.fb.array(this.initFormArray(newSize))
    this.form.updateValueAndValidity();
  }
}

这在 Plunker 中有说明，但我不妨在这里提一下，订阅 FormArray 的 valueChanges 似乎没有帮助(或者我没有在我的订阅中做正确的事情):

this.form.controls['someArray'].valueChanges.subscribe((data) => this.form.updateValueAndValidity());

感谢任何插话的人:)

编辑(2016 年 10 月 11 日):使用 valueChanges Hook 让我几乎可以解决问题，但解决方案并不令人满意。出于这个原因，我正在编辑而不是回答我自己的问题，但如果任何 mod 认为这是一个有效的结论，请务必做你认为足够的事情。

至于我的“解决方案”:不是在 FormArray 或根 FormGroup 级别订阅 valueChanges，我几乎可以通过订阅 valueChanges observable 来实现我想要的组成 FormArray 的每个 FormGroup:

initFormArray(size:number):FormGroup[]{
  let newFormArray:FormGroup[] = [] ;

  for(let i = 0 ; i < size ; i++){
    let formGroup = this.fb.group({
      fieldA: [null, Validators.required],
      fieldB: [null, Validators.required]
    }) ;

    formGroup.valueChanges.subscribe((data) => this.form.updateValueAndValidity());
    newFormArray.push(formGroup); 
  }

return newFormArray;

通过这样做，当 FormArray 被修改时，根 FormGroup 会被更新，但有一个滞后。例如，如果我在字段 A 中输入“123”，则根 FormGroup 值包含 "fieldA":"12"。

因此我的“解决方案”并不令人满意:通过在订阅中添加一个虚拟的 setTimeout，根 FormGroup 完全按照我想要的方式更新......除了理想情况下不需要 setTimeout。

formGroup.valueChanges.subscribe((data) => setTimeout(()=>this.form.updateValueAndValidity(), 1);

有没有什么方法可以在不诉诸 setTimeout 的情况下进行管理？

更新的 Plunker:https://plnkr.co/edit/7mbTNPHjRhlU3ostf3av

Answer 1

我试了一下你的plunker，发现了问题

当您分配新的 FormArray 时更改它的大小后，您单独分配了它，没有将它与父项正确关联 FormGourp .
使用 this.form.controls[<controlName>] = new FormControl/ FormArray/ FormGroup;不适用 parent新控件的属性。
这就是为什么在更新其中一个父字段时“刷新”整个表单值之前，这些值不会传播到父字段的原因。

你可以在plunker中看到, 我加了一些 console.log是为了让你更好地理解。

我还添加了正确的方法(在我看来)来替换 someArray 的值FormArray.
使用 official documentation帮助很大。

希望对你有帮助