how to initialize reactive forms using angularjs for arrays

Question

I have a reactive forms for angularjs and try to initialize few field:

initializeBusinessEposForm(): void {
    this.businessEposForm = this.formBuilder.group({
      custom_pos_priority: new FormControl(false),
      custom_float_menu: new FormControl(false),
      epos_quick_code_print: new FormControl(false),
      permission: this.formBuilder.group({
        isEposCustomerData: new FormControl(false),
        stripe_terminal_processor: new FormControl(''),
        tips: [],
      }),
    });
  }

Here tips are array with these values:

[
    {
        "name": "gratuity_tip",
        "isActive": false,
        "orderType": []
    },
    {
        "name": "terminal_tip",
        "isActive": true,
        "orderType": [
            1,
            4
        ]
    }
]

now how to add this arrays to tips: [] as array

Answer 1

Have you tried to use FormArray ?

initializeBusinessEposForm(): void {
    this.businessEposForm = this.formBuilder.group({
      custom_pos_priority: false,
      custom_float_menu: false,
      epos_quick_code_print: false,
      permission: this.formBuilder.group({
        isEposCustomerData: false,
        stripe_terminal_processor: '',
        tips: this.formbuilder.array(tips.map(tip => initTipFormGroup(tip)),
      }),
    });
  }

initTipFormGroup(tip: Tip): FormGroup {
  return this.formbuilder.group({
    name: tip.name,
    isActive: tip.isActive,
    orderType: tip.orderType,
  });
}