如何将数组修补成 formarray

Question

 this.formgroup = formbuilder.group({
      ordering_data: formgroup.array([this.createOrder()]),
    });

  createOrder(): FormGroup {
    return this.fb.group({
      order: [null, [Validators.required]],
      section_menu_id: [null, [Validators.required]],
    });
  }

Api 结果

[
  {
    "order": 0,
    "section_menu_id": 3
  },
  {
    "order": 1,
    "section_menu_id": 1
  },
  {
    "order": 2,
    "section_menu_id": 6
  },
]

我尝试在我的表单输入中显示来自 api 结果的所有这些数据。有人能告诉我如何将 api 结果修补到 formgroup 中吗？提前致谢

Answer 1

您尝试过以下方法吗？

this.formGroup.controls.ordering_data.patchValue(apiResult);

无法在本地测试。也许你可以提供一个 stackblitz？

Answer 2

在我的项目中，我做了这样的事情：

const data = [
  {
    "order": 0,
    "section_menu_id": 3
  },
  {
    "order": 1,
    "section_menu_id": 1
  },
  {
    "order": 2,
    "section_menu_id": 6
  },
];

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.formgroup = this.fb.group({
    ordering_data: this.fb.array(this.data.map(item => this.createOrder(item))),
  });
}

createOrder(item?: any): FormGroup {
  return this.fb.group({
    order: [item ? item.order : null, Validators.required],
    section_menu_id: [item ? item.section_menu_id : null, Validators.required],
  });
}

Answer 3

考虑下面，但我没有测试它；

interface Order {
  order: number;
  section_menu_id: number;
}

ngOnInit() {
  this.formgroup = formbuilder.group({
     ordering_data: formgroup.array([]),
  });
}

createOrder(o: Order): FormGroup {
  return this.fb.group({
     order: [o.order, [Validators.required]],
     section_menu_id: [o.section_menu_id, [Validators.required]],
  });
}

getOrders() {
   this.http.get(url).subscribe(ordersResponse: Order[]) => {
     const ordering_data = this.formgroup.get('ordering_data') as FormArray;
     ordersResponse.forEach((o: Order) => {
        ordering_data.push(this.createOrder(o.order, o.section_menu_id));
     }

     this.formgroup.updateValueAnDValidity();
   });
}

如何将数组修补成 formarray

How to patch an array into formarray

formbuilder

angular

formarray

formgroups

angular8