Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

Question

Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

When I click a button in my Angular v14 HTML template, I am trying to dynamically generate form controls and although I am able to generate them, an error is popping up in the console.

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

Here is the 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>

javascript angular user-interface angular14

Answer 1

Answer №1

Avoid iterating over the values directly (if you change an input, Angular will redraw and you'll lose focus):

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

Instead, use a "getter"

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

and iterate over the "controls"

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

formGroupName is not just an attribute, it's a directive:

<div attr.formGroupName="{{i}}"> //<--INCORRECT
<div [formGroupName]="i"> //<---CORRECT

When managing formGroup of formArray, consider this structure: (formArrayName outside loop, same tag in loop, formGroupName)

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

Use the safe operator (?) after .get to avoid errors like "possible null or undefined"
```
feature.get('fName')?.invalid && feature.get('fName')?.touched
```

Similarly, when checking for errors.required

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

Answer 2

Avoid iterating over the values directly (if you change an input, Angular will redraw and you'll lose focus):

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

Instead, use a "getter"

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

and iterate over the "controls"

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

formGroupName is not just an attribute, it's a directive:

<div attr.formGroupName="{{i}}"> //<--INCORRECT
<div [formGroupName]="i"> //<---CORRECT

When managing formGroup of formArray, consider this structure: (formArrayName outside loop, same tag in loop, formGroupName)

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

Use the safe operator (?) after .get to avoid errors like "possible null or undefined"
```
feature.get('fName')?.invalid && feature.get('fName')?.touched
```

Similarly, when checking for errors.required

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

Struggling to dynamically create form controls within Angular forms and receiving the following error in the console: "TypeError: feature_r5.get is not a function"

Answer №1

Similar questions

.toggle function malfunctioning

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

The authentication0 router fails to initiate navigation

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

Are the props.children handled differently within the <Route> component compared to other React components?

Using jQuery, you can easily pass an array in an AJAX request

Accessing a variable from an external JavaScript file using jQuery

Encountering a Vercel deployment failure due to a TypeError: The 'split' property cannot be read from undefined within several objects

Issue with overlay functionality after updating to jQuery version 1.12.1

Decorators do not allow function calls, yet the call to 'CountdownTimerModule' was executed

Challenge with maintaining tab view data in Openui5

Is there a way to trigger an Ajax function after individually selecting each checkbox in a list in MVC 4 using Razor syntax?

How can the callback from C++ be successfully installed in the Javaobject window within QtWebkit?

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

Unable to load the threejs module

Simplified jQuery function for multiple div mouseover operations

How can I handle a queue in Angular and rxjs by removing elements efficiently?

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval

Angular template variables in VS Code now have the ability to automatically update their names when renamed

React 18 doesn't trigger component re-rendering with redux