What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Question

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Hello and thank you for taking the time to read my question!

I am currently working on an Ionic 3 app project. One of the features in this app involves a page that can have up to 200 identical forms, each containing an input field. You can see an example of what I mean by visiting this link: ionic page with repeated forms. To help clarify the placement of the input spaces, I labeled them as "input3," "input4," and so on.

The number of these forms displayed on the page is determined by the user through a settings modal, which means I cannot hard-code them statically into the HTML markup. In order to achieve this dynamic functionality, I utilized the following code snippet in my HTML:

      <form>
      <ion-row *ngFor="let y of rowCount|times" text-center align-items-center>
          <ion-col align-self-center col-2>{{y}}</ion-col>
          <ion-col text-center align-self-center col-4><ion-input id='input{{y}}' 
            formControlName="input{{y}}" [(ngModel)]="inputy"></ion-input></ion-col>
          <ion-col align-self-center col-4>{{status}}</ion-col>
          <ion-col align-self-center col-2><button
            id= 'button{{y}}' ion-button small icon-only>
            <ion-icon name="brush"></ion-icon></button></ion-col>
      </ion-row>
    </form>

To repeat the rows based on the value stored in the variable rowCount, I implemented a Custom Pipe named times.

While I was successful in dynamically generating attributes such as id, formControlName, and ngModel within the HTML, I am facing a challenge in accessing these dynamically created values from the TypeScript file associated with this component. Can you provide guidance on how I might retrieve the values of each dynamically generated formControlName in the TypeScript code? Additionally, is there a way to extract the values from the dynamically generated ngModel?

javascript forms typescript ionic2

Answer 1

Answer №1

It seems like you might be blending reactive forms, such as using formControlName, with template driven forms like ngModel. It would be beneficial to review the Angular documentation on these concepts before proceeding.

If you opt for reactive forms, consider utilizing a formArray as it is specifically designed for this purpose. The ngFor directive allows you to access the index in the template, and your formControlName will correspond to the index.

You can update the value of reactive forms using methods like patchValue and setValue from your TypeScript file.

I'm not implying that you must choose reactive forms over template driven forms; just avoid mixing them together. If you feel more comfortable with template driven forms, that's perfectly acceptable. The documentation provides an overview of the advantages and disadvantages of each approach.

Best of luck!

Answer 2

It seems like you might be blending reactive forms, such as using formControlName, with template driven forms like ngModel. It would be beneficial to review the Angular documentation on these concepts before proceeding.

If you opt for reactive forms, consider utilizing a formArray as it is specifically designed for this purpose. The ngFor directive allows you to access the index in the template, and your formControlName will correspond to the index.

You can update the value of reactive forms using methods like patchValue and setValue from your TypeScript file.

I'm not implying that you must choose reactive forms over template driven forms; just avoid mixing them together. If you feel more comfortable with template driven forms, that's perfectly acceptable. The documentation provides an overview of the advantages and disadvantages of each approach.

Best of luck!

Answer 3

Answer №2

Success! I was able to accomplish my goal.

In the file home.ts, I established a FormArray within a FormGroup, as illustrated below:

  this.homeForm = new FormGroup({
  bicos: new FormArray([])
  });

Next, in your repeat/add function, you will utilize this code:

 addForm(){
 (<FormArray>this.homeForm.controls['bicos'])
 .push(new FormControl(null));
 }

Moreover, in home.html, the crucial section appears like this:

 <form [formGroup]="homeForm"> 
 <ion-row formArrayName="bicos" *ngFor="let item of 
 homeForm.controls.bicos.controls; let i = index" >
 <ion-col text-center align-self-center col-5>
 <ion-input #inputs formControlName="{{i}}" type="number"></ion-input>
 </ion-col>
 </ion-row>
 </form>

Reiterating what I mentioned in the previous comment, you can also refer to another approach here.

Answer 4

Success! I was able to accomplish my goal.

In the file home.ts, I established a FormArray within a FormGroup, as illustrated below:

  this.homeForm = new FormGroup({
  bicos: new FormArray([])
  });

Next, in your repeat/add function, you will utilize this code:

 addForm(){
 (<FormArray>this.homeForm.controls['bicos'])
 .push(new FormControl(null));
 }

Moreover, in home.html, the crucial section appears like this:

 <form [formGroup]="homeForm"> 
 <ion-row formArrayName="bicos" *ngFor="let item of 
 homeForm.controls.bicos.controls; let i = index" >
 <ion-col text-center align-self-center col-5>
 <ion-input #inputs formControlName="{{i}}" type="number"></ion-input>
 </ion-col>
 </ion-row>
 </form>

Reiterating what I mentioned in the previous comment, you can also refer to another approach here.

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Answer №1

Answer №2

Similar questions

Display HTML in JavaScript without altering the Document Object Model

What would cause the nsfw property to be absent from a TextChannel in client.on("messageCreate") event?

Can [] be considered a valid type in Typescript language?

Leveraging multer for handling a FormData object in a node.js server

What is causing this TypeScript error to be raised by this statement?

Invalidating Angular Guards

Difficulty encountered when deploying cloud function related to processing a stripe payment intent

The callback function is not being executed in the Ajax request

Set the rowspan to 2 when the v-for index does not equal 2

How to shift an image to the right side of the navbar

What is the best way to enable multiple form submissions in web2py?

How to Retrieve Video Length using AJAX in the YouTube API

Issues with React in a Production Environment

Swap out a button for another using JavaScript

Tips for minimizing Angular $digest-cycle invocations

The element 'loginToken' is not found within the type '{ loginToken: string; } | { error: Error; } | { username: string; password: string; }'

Issue with Axios response processing

A more efficient approach to creating a personalized design

pressing a button unrelated to the 'close' button still triggers the close event

Error: Unexpected TypeError occurred stating that 'map' cannot be read from undefined, although the map method is not being used in the code