Javascript 嵌套fb.group和fb.array的修补程序值-被动形式

我有以下反应形式：

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

})

}

问题：

 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

});

我正在为嵌套fb.group和fb.array努力

patchValue

：

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

skills: this._fb.array([])

知道如何为上述两个实例修补价值吗？

更新：

 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

});

嵌套的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的问题：

 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

});

来自服务器的阵列数据的结构如下所示：

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

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

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

我尝试过的：

 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

});

前端：

 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>

{{skill}}

FormArray

必须具有与数组中要设置为其值的项相同数量的控件。例如，如果您有此阵列：

const arr = [1,2,3];

这张

表格

：

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

您可能希望执行以下操作：

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

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: ['']
  })

及

---

这些不是要分配给表单的值，这些是

FormGroup

和

FormArray

的新声明

FormArray

必须具有与数组中要设置为其值的项一样多的控件。例如，如果您有此阵列：

const arr = [1,2,3];

这张

表格

：

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

您可能希望执行以下操作：

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

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: ['']
  })

及

---

这些不是您要分配给表单的值，这些是

FormGroup

和

FormArray

的新声明，谢谢您的回答。我现在就试试。一个问题。我有一个

嵌套的formGroup

。

cvForm

组具有嵌套的

experience

formGroup。如何为嵌套窗体组修补值？只需将对象与嵌套对象一起使用，只需确保结构相同。您好，嵌套的fb组工作正常。但由于某种原因，fb阵列不是。它看起来像什么？它抛出了一个错误吗？您要修补的阵列是什么样子的？提供一些见解，我将能够帮助你嗨，我用一些细节更新了我的问题。如果你需要更多信息，请告诉我。谢谢你的帮助，谢谢你的回答。我现在就试试。一个问题。我有一个

嵌套的formGroup

。

cvForm

组具有嵌套的

experience

formGroup。如何为嵌套窗体组修补值？只需将对象与嵌套对象一起使用，只需确保结构相同。您好，嵌套的fb组工作正常。但由于某种原因，fb阵列不是。它看起来像什么？它抛出了一个错误吗？您要修补的阵列是什么样子的？提供一些见解，我将能够帮助你嗨，我用一些细节更新了我的问题。如果你需要更多信息，请告诉我。谢谢你的帮助。