I'm trying to generate form control dynamically in angular forms & i'm facing that error in console "TypeError: feature_r5.get is not a function"

I'm trying to generate form controls dynamically on click of a button in Angular v14 html template i generate it but i'm facing that error in console.

ERROR TypeError: feature_r5.get is not a function
 at PostAdvComponent_div_40_Template

Html template code

<div id="features" class="tab-pane mytab-pane">
            <div class="form-group">
                <button type="button" class="btn btn-primary" (click)="addFeatureButtonClick()">Add</button>
            </div>

            <div formArrayName="features" *ngFor="let feature of advForm.get('features')?.value; let i = index">
                    <div attr.formGroupName="{{i}}">
                        <div class="form-group" [ngClass]="{'has-error' : feature.get('fName').invalid &&
                                                                           feature.get('fName').touched}">
                            <div class="input-group">
                                <span class="input-group-prepend">
                                    <label class="input-group-text"><strong>Features</strong></label>
                                </span>
                                <input type="text" id="{{'fName'+i}}" name="fName" class="form-control" placeholder="Features"
                                    formControlName="fName"/>
                            </div>
                            <span class="help-block" *ngIf="feature.get('fName').errors.required &&
                                                            feature.get('fName').touched">
                                Feature is required
                            </span>
                        </div>
                    </div>
            </div>
        </div>

1. Not iterate over the values (else when you change an input, Angular redraw and you loose the focus):

   *ngFor="let feature of advForm.get('features')?.value;.." //<--WRONG
   

   You need use a "getter"

   get featureFormArray()
   {
      return this.form.get('features') as FormArray
   }
   

   and iterate over "controls"

   *ngFor="let feature of featureFormArray.controls;.." //<--OK
   

2. formGroupName is not an attribute, else a directive, so

   <div attr.formGroupName="{{i}}"> //<--WRONG
   <div [formGroupName]="i"> //<---OK
   

3. When manage fromGroup of formArray I like more use this structure
   (the formArrayName outside the loop, the same tag in loop, the
   formGroupName):

   <form [formGroup]="form">
      <div formArrayName="features">
         <div *ngFor="let feature of featuresFormArray.controls;let i=index"
                      [formGroupName]="i">
            ...yours inputs..
            <input formControlName="fName">
         </div>
      </div>
   </form>
   

4. You need use the safe operator (see the ? before the dot) after the
   .get else you have an error of "possible null or undefined"

   feature.get('fName')?.invalid && feature.get('fName')?.touched
   

5. Same before when you check errors.required

   *ngIf="feature.get('fName')?.errors?.required