Как пропатчить массив в formarray

 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. заранее спасибо


angular angular8 formarray formgroups formbuilder
person Benni    schedule 12.10.2020    source источник
comment
Когда вы получили свои данные? Вам нужно инициализировать форму с заказом и section_menu_id. я не вижу где ты это делаешь   -  person Emilien    schedule 12.10.2020
comment
я получил данные о ngOnInit @Emilien   -  person Benni    schedule 12.10.2020

Ответы (3)


arrow_upward
1
arrow_downward

В своих проектах я делаю что-то вроде этого:

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],
  });
}
person Emilien    schedule 12.10.2020
comment
это сработало для меня, но я не знаю, почему первое из моих значений моего объекта массива ([0]) довольно странно. порядок: null, section_menu_id: 3. остальные верны - person Benni; 12.10.2020
comment
@Benni Я отредактировал свой пост, проверьте функцию createOrder - person Emilien; 12.10.2020
comment
да, теперь это полностью работает, спасибо ;D . И у вас есть опечатка в вашем коде, сэр section_menu_id: [item ? item.section_menu_id || null, Validators.required] , он должен быть section_menu_id: [item ? item.section_menu_id : null, Validators.required] - person Benni; 12.10.2020
comment
@Бенни Супер! Да, боже, я снова отредактировал свой пост: P Спасибо за отзыв. - person Emilien; 12.10.2020

arrow_upward
0
arrow_downward

Вы пробовали следующее?

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

Не могу протестировать локально. Может быть, вы могли бы предоставить stackblitz?

person Akora    schedule 12.10.2020
comment
да, я пробовал это, но результат не такой, как ожидалось. это результат, когда я попытался использовать этот код {ordering_data: [{order: 0, section_menu_id: 3} ]} - person Benni; 12.10.2020

arrow_upward
0
arrow_downward

рассмотрим ниже, но я не проверял это;

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();
   });
}
person cagcak    schedule 12.10.2020