在 angular 的表单控件中推送嵌套数组

Question

我在angular

中有这种结构的形式

this.myForm = this._fb.group({
      name: ["", Validators.required],
      description: ["", Validators.required],
      item: this._fb.array([
     ])
});

我正在使用这个函数来修补表单值

patchFormArray(item: any) {
   let ctrl = <FormArray>this.myForm.controls.item;
    item.forEach(items => {
       const fb = this._fb.group({
         prefix:  [items?items.prefix:"", Validators.required],
         text: [items?items.text:"", Validators.required],
         Questiontype: [items?items.Questiontype:"", Validators.required],
         options: this._fb.array([ ])
       })
        fb.patchValue(item);
        ctrl.push(fb);
      })
   }

   patchFormData(data: any){
      this.myForm.patchValue({
         name: data.name,
         description: data.description
      })
   }

我想修补项目数组中选项数组的值。我已经尝试使用此功能，但它仍然无法正常工作。添加了 InitOptionArray 函数但仍然无法正常工作

patchOptionsArray(items:any){
  var index = 0
     items.forEach(item => {
       let Optionsctrl = <FormArray>this.myForm.get(['item', index, 'options']);
          items[index].options.forEach(option => {
               Optionsctrl.push(
                 this._fb.group({
                   value:  [option?option.value:""]
                 })
               )
          });
         index = index + 1;
   });
}

Answer 1

在 angular 中的反应式表单中管理 formArray 可能很复杂。我创建了我的 on 模式来开发和保持我的代码尽可能干净，我将告诉你我如何使用 formArrays inside

管理我的反应式表单

假设你有一个 formGroup，里面有一个 formArray

this.myForm = this._fb.group({
        name: this._fb.control("",[Validators.required]),
        description: this._fb.control("",[Validators.required]),
        item: this._fb.array([])
  });

请注意，我将 formArray 声明留空，因为我将使用一种方法来管理内部的 formGroups

我要创建一个方法，return 我的项目数组来自 formGroup，这个方法将无处不在

get items(): FormArray {
  return this.myForm.get("items") as FormArray
}

现在：如何在formArray 中声明一个表单组？，此方法将接受值，例如我将要设置的可选参数值

addItem(values?: any) {
  const tempFormGroup = this._fb.group({
    prefix: this._fb.control("",[Validators.required]),
    options:this._fb.array([]), //adding the array field
  })

 if(values) {
  tempFormGroup.setValue(values)
 }
 this.items.push(tempFormGroup)
}

如何删除表单数组中的表单组？您将需要要删除的特定表单组的索引

removeItem(index:number ) {
   this.items.removeAt(index)
 }

如果您的内部 formControl 中有另一个 formArray，您将需要以与他的父级相同的方式处理它

已更新

如果第一个数组中有另一个数组，则需要知道两个索引才能管理第二个数组

options(index:number):  FormArray {
  return this.items.at(index).get("options") as FormArray
}

addOptions(itemIndex:number, values?:any) {
  this.options(index).push(this._fb.group({...}))
}

removeOptions(itemIndex:number,optionIndex:number){
  this.options(itemIndex).removeAt(index)
}

如果您需要更多帮助，请告诉我

问候

在 angular 的表单控件中推送嵌套数组

pushing a nested array in a form control in angular

angular

angular-reactive-forms

angular-forms