Angular Add Row Function Not Working With Array-CodePudding

I have a FormGroup In Angular with an FormArray inside of it , I created a function where I can push more controls to the frontend for a user to fill in , but the problem is my Array only adds 1 input to frontend and not input for each column. (I dynamically create the inputs within the addRows button based on input from other screen)

  addRows() {
    switch (this.selectedRadioButton)
    {
      case("General"):
      (this.tableLineItems as FormArray).push(new FormControl({
        ChargeCode: [''],
        ChargeCodeDescription: [''],
        Type: ['', ],
        VAT: [''],
        ActualAmount: [''],
        ReveneAmount: [''],
        FirstPaymentReference: [''],
        isEditable: [true]
      }));
      break;
      case("Currency"):
      (this.tableLineItems as FormArray).push(new FormControl({
        ChargeCode: ['', Validators.required],
        ChargeCodeDescription: ['', [Validators.email]],
        Currency:['' , [Validators.required]],
        ROE: ['', [Validators.required]],
        ForeignAmount: ['',[Validators.required]],
        InvoiceAmount: ['',[Validators.required]],
        ActualAmount: ['', [Validators.required, Validators.maxLength(10)]],
        ReveneAmount: ['', [Validators.required, Validators.maxLength(10)]],
        FirstPaymentReference: ['', [Validators.required, Validators.maxLength(10)]],
        isEditable: [true]
      }));
      break;
    }
  }

This is what the frontend looks like when I click this button:

Frontend Example:
enter image description here

HTML Code:
enter image description here

FormArray Values:
enter image description here enter image description here

As you can see the array adds all those controls as rows , and then the add button only adds one input control because it thinks all those headings and controls are only 1 row , instead of creating a input for each and every one of my controls

I have tried splicing and dicing my code and asking for help from colleagues but I am stumped at how to get this done.

I want the inputs to generate individually for each value instead of just one being generated for the each row.

CodePudding user response：

You're pushing a FormControl instead of a FormGroup into the FormArray.

Replace FormControl with FormGroup or in this case with a FormBuilder group to have to make less changes:

 import {FormBuilder} from '@angular/forms'

 constructor(private readonly fb: FormBuilder) {}

 addRows() {
    switch (this.selectedRadioButton)
    {
      case("General"):
      (this.tableLineItems as FormArray).push(this.fb.group({
        ChargeCode: [''],
        ChargeCodeDescription: [''],
        Type: ['', ],
        VAT: [''],
        ActualAmount: [''],
        ReveneAmount: [''],
        FirstPaymentReference: [''],
        isEditable: [true]
      }));
      break;
      case("Currency"):
      (this.tableLineItems as FormArray).push(this.fb.group({
        ChargeCode: ['', [Validators.required]],
        ChargeCodeDescription: ['', [Validators.email]],
        Currency:['' , [Validators.required]],
        ROE: ['', [Validators.required]],
        ForeignAmount: ['',[Validators.required]],
        InvoiceAmount: ['',[Validators.required]],
        ActualAmount: ['', [Validators.required, Validators.maxLength(10)]],
        ReveneAmount: ['', [Validators.required, Validators.maxLength(10)]],
        FirstPaymentReference: ['', [Validators.required, Validators.maxLength(10)]],
        isEditable: [true]
      }));
      break;
    }
  }