Question

我有以下反应形式：

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.array ，我正在努力patchValue：

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

skills: this._fb.array([])

我知道如何为上述2个实例修补值？

更新

嵌套的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的新声明。

嵌套fb.group和fb.array的补丁值 - 反应形式

1 个答案: