javascript - 嵌套 fb.group 和 fb.array 的补丁值 - react 形式

Question

我有以下响应式(Reactive)形式:

this.cvForm = this._fb.group({
  sector: ['', [Validators.required]],
  background: ['', [Validators.required]],
  experience: this._fb.group({
    field0: ['', [Validators.required]],
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
    field3: ['', [Validators.required]],
    field4: [''],
    field5: ['']
  }),
  skills: this._fb.array([]),
  iconOne: ['', [Validators.required]],
  iconTwo: ['', [Validators.required]],
  iconThree: ['', [Validators.required]],
  iconFour: ['', [Validators.required]],
  otherSkills: ['', [Validators.required]]
});
}

我正在从数据库中检索要“修补”的值，并使用下面的patchValue:

 onCVRetrieved(cv: ICV): void {
   if (this.cvForm) {
     this.cvForm.reset();
  }

  this.cv = cv; // this contains the values returned from the DB

  this.cvForm.patchValue({

  sector: this.cv.sector,
  background: this.cv.background,
  experience: this._fb.group({
    field0: ['', [Validators.required]],
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
    field3: ['', [Validators.required]],
    field4: [''],
    field5: ['']
  }),
  skills: this._fb.array([]),
  iconOne: this.cv.iconOne,
  iconTwo: this.cv.iconTwo,
  iconThree: this.cv.iconThree,
  iconFour:this.cv.iconFour

})

}

问题:

我正在努力为嵌套的fb.group和fb.arraypatchValue:

experience: this._fb.group({
    field0: ['', [Validators.required]],
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
    field3: ['', [Validators.required]],
    field4: [''],
    field5: ['']
  })

skills: this._fb.array([])

知道如何为上述 2 个实例 patchValue 吗？

更新:

嵌套的 fb.group 有效:

 this.cvForm.controls['experience'].patchValue({
  field0: this.cv.experience['field0'],
  field1: this.cv.experience['field1'],
  field2: this.cv.experience['field2'],
  field3: this.cv.experience['field3'],
  field4: this.cv.experience['field4'],
  field5: this.cv.experience['field5']
});

fb.array 问题:

服务器端的数组数据结构如下:

skills: ["something", "something else", "another thing", "one more thing"]

在前端，我有大量的技能列表，其中有复选框。我想自动检查前端从数据库返回的值。例如:如果数据库返回技能数组，其中包括“唱歌”。唱歌应该在前端检查。

我尝试过的:

 const formArray = new FormArray([]);

 const skills: [String] = this.cv.skills;
 skills.forEach(item => formArray.push(new FormControl('')));

this.cvForm.patchValue({

  sector: this.cv.sector,
  background: this.cv.background,
  skills: formArray.patchValue(skills),
  iconOne: this.cv.iconOne,
  iconTwo: this.cv.iconTwo,
  iconThree: this.cv.iconThree,
  iconFour: this.cv.iconFour

});

前端:

请注意，所有可能的复选框的列表都是从数据库中获取的。

<div class="uk-margin">
    <div *ngFor="let skill of allSkills">
      <input type="checkbox"> {{skill}}<br>
  </div>
</div>

Answer 1

FormArray 必须具有与数组中要设置为其值的项目一样多的控件。例如，如果您有以下数组:

const arr = [1,2,3];

还有这个FormArray:

const formArray = new FormArray([]); // equivalent to fb.array([])\

您可能想做这样的事情:

arr.forEach(item => formArray.push(new FormControl('')));

只有这样:

formArray.patchValue(arr);

至于FormGroup，它已经具有必要的结构并且可以轻松修补:

const formGroup = fb.group({
    name: [''],
    lastName: ['']
});
formGroup.patchValue({
   name: 'Foo',
   lastName: 'Bar'
});

关于您的代码:看来您没有在代码中修补有效值。看，您传递给 patchValue 方法的对象包含类似

的字段

experience: this._fb.group({
field0: ['', [Validators.required]],
field1: ['', [Validators.required]],
field2: ['', [Validators.required]],
field3: ['', [Validators.required]],
field4: [''],
field5: ['']
  })

和

skills: this._fb.array([]),

这些不是您要分配给表单的值，而是 FormGroup 和 FormArray 的新声明。