I am working on angular form array but not able to get the desire solution

Question

I have already a form i angular under that form i need an form Array I have imlement that but the issue is i want the dynamic keys

  <div class="row">
    <div class="col-sm-12 col-md-4 col-lg-4">
      <mat-form-field class="example-full-width" appearance="outline">
        <mat-label>Service name</mat-label>
        <input type="text" matInput placeholder="Ex. Fairbet" formControlName="service_name">
        <mat-error *ngIf="isSubmitted && addServiceForm.get('service_name')?.hasError('required')">Service name is required</mat-error>
      </mat-form-field>
    </div>
    <!-- Other form fields -->
  </div>
  <div *ngIf="this.banking == 11">
    <div class="row">
      <form [formGroup]="registrationForm">
        <div class="d-flex justify-content-between mb-2">
          <h5>Add Plan</h5>
          <div class="d-flex justify-content-between">
            <button class="btn btn-sm d-flex align-items-center mx-1 btn-success" (click)="addPlan()">
              <mat-icon>add</mat-icon>
            </button>
          </div>
        </div>
        <div formArrayName="addDynamicElement">
          <div class="row mb-4 position-relative " *ngFor="let item of addDynamicElement.controls; let i = index" [formGroupName]="i">
            <!-- Dynamic plan fields -->
          </div>
        </div>
      </form>
    </div>
  </div>
</form>```

Answer 1

If am right you want the form control names to be dynamic, meaning these input fields may vary depending on various scenarios.

For this you can use forloop like this :

      <div class="row mb-4 position-relative " *ngFor="let item of addDynamicElement.controls; let i = index" [formGroupName]="i">
          <!-- Dynamic plan fields -->
          <input formControlName='inputField_'+{{i}}/>
        
      </div>