How to bind formControlName value with *ngFor in Angular

Question

Response Json from back-end

{
    "INCOME": {
        "TOURIST": [{
                "vehicleNumber": "TN 47 RG 4567",
                "details": [{
                    "id": 01,
                    "amount": 100
                },{
                    "id": 02,
                    "amount": 200
                }]
            },
            {
                "vehicleNumber": "TN 47 RG 9876",
                "details": [{
                    "id": 03,
                    "amount": 300
                },{
                    "id": 04,
                    "amount": 400
                }]
            }
        ]
    }
}

is assigned to this.tesTourist = this.objectValue.INCOME.TOURIST;

component.html

                    <form [formGroup]="accountsForm" autocomplete="off"> 
                    <div class="row">
                        <div *ngFor="let obj of tesTourist">
                            <div *ngFor="let item of obj.details">
                                <label class="text-left"> {{obj.vehicleNumber}} :</label>
                                <input type="text" formControlname="incomeTourist"  value="{{item.amount}}">
                            </div>
                        </div>
                    </div>
                    </form>

component.ts

                    this.accountsForm = this.fb.group({
                        incomeTourist:[],
                    });

Let as take obj.details.length is 2. It displays 2 input box in page with the value amount binded(item.amount). While changing the amount in any one of the input field that could not bind the amount in incomeTourist. It constantly shows null as below.

       Result of <pre><code>{{accountsForm?.value | json}}</code></pre>
                    {
                    "incomeTourist": null
                    }

Answer 1

You form structure should be like below.

 this.accountsForm = this.fb.group({
  testTourist: this.fb.array([]),
 });

After that create 2 method to create testTourist and incomeTourist form array.

createTestTourist() {
  return this.formBuilder.group({
    details: this.fb.array([])
  });
}
createDetails() {
  return this.formBuilder.group({
    amount: [],
    vehicleNumber: []
  });
}

And after that loop over the testTourist object in ngOnInt method.

this.testTourists.forEach(testTourist => {
  const fb = this.createTestTourist();
  testTourist.details.forEach((detail, i) => {
    const cfb = this.createDetails();
    cfb.get('amount').setValue(detail.amount);
    cfb.get('vehicleNumber').setValue(detail.vehicleNumber);

    (fb.controls.details as FormArray).push(cfb);
  });
  (this.accountsForm.get('testTourist') as FormArray).push(fb);
});

after this in html you should write below code.

<form [formGroup]="accountsForm" autocomplete="off"> 
          <div class="row">
              <div *ngFor="let obj of testTourists; let i= index" formArrayName="testTourist">
                <ng-container [formGroupName]="i">
                  <div *ngFor="let item of obj.details; let j= index" formArrayName="details">
                      <ng-container [formGroupName]="j">
                          <label class="text-left"> {{item.vehicleNumber}} :</label>
                          <input type="text" formControlName="amount">
                      </ng-container>
                  </div>
                </ng-container>
              </div>
          </div>
      </form>

After this if you do any changes it will reflect in form object. You can console the form object.

console.log(this.accountsForm.value)

you will get expect same object structure as you are providing. And you will get updated values.