How to patch an array into 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 Result

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

I try to show all those data from api result on my form input. Can someone tell me how to patch the api result into formgroup. Thanks in advance

When did you get your data ? You need to initializate the form with order and section_menu_id. I don't see where you do this — Emilien
– Emilien, Commented Oct 12, 2020 at 9:48

Emilien · Accepted Answer · 2020-10-12 12:08:03Z

1

In my projects, I do something like this :

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],
  });
}

edited Oct 12, 2020 at 12:08

answered Oct 12, 2020 at 9:55

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benni Over a year ago

its worked for me , but idont know why first of my value of my array object ([0]) kinda weird.. order: null, section_menu_id: 3. the rest of them is right

Emilien Over a year ago

@Benni I've edited my post, please check the createOrder function

Benni Over a year ago

yeah now it fully work, thank you ;D . Anw it got some typo on ur code sir section_menu_id: [item ? item.section_menu_id || null, Validators.required] , it should be section_menu_id: [item ? item.section_menu_id : null, Validators.required]

Emilien Over a year ago

@Benni Super ! Yeah god I've edited my post again :P Thanks for feedback.

Akora · Accepted Answer · 2020-10-12 09:42:05Z

0

Have you tried the following?

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

Cannot test it locally. Maybe you could provide a stackblitz?

answered Oct 12, 2020 at 9:42

Akora

8558 silver badges23 bronze badges

1 Comment

Benni Over a year ago

yeah i have tried that, but the result isnt as expected. this is the resulted when i tried with that code { "ordering_data": [ { "order": 0, "section_menu_id": 3 } ] }

cagcak · Accepted Answer · 2020-10-12 09:59:59Z

consider below but I didn't test it;

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();
   });
}

Collectives™ on Stack Overflow

How to patch an array into formarray

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related