struggling to implement dynamic reactive forms with Angular

Question

struggling to implement dynamic reactive forms with Angular

Currently, I am experimenting with building a dynamic reactive form using Angular. While I have successfully implemented the looping functionality, I am facing some challenges in displaying it the way I want.

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div *ngFor="let dat of formData; let index = index;">
     <label for="{{dat.name}}">{{dat.name }}</label>
     <input type="text" id="{{dat.id}}" [formControlName]="dat.name" />  
    </div>


</form>
<button type="button"><button>

.ts

 registerForm: FormGroup;
  submitted = false;

  formData = [{ id: 'firstName', name: 'firstName' },
  { id: 'lastName', name: 'lastName' },
  { id: 'address', name: 'address' },
  { id: 'emailid', name: 'emailid' }
  ]


  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      formData: []
    });
   }

   onSubmit(){
    console.log(this.registerForm.value); 
   }

Moreover, I am looking to add validation to the form as well.

You can check out my code on StackBlitz by following this URL:

https://stackblitz.com/edit/angular-awguej

angular typescript

Answer 1

Answer №1

One way to achieve this is by using the this.formBuilder.array method in Angular.

Check out this Stackblitz example for reference.

component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div formArrayName="formData">
        <div *ngFor="let dat of registerForm.get('formData').controls;let index = index;" [formGroupName]="index">
            <label>{{dat.get('name').value }}</label>
     <input type="text" formControlName="name" />  
    </div>
<button type="submit">Submit</button>
  </div>
</form>
<button type="button" (click)="addNew()">Add</button>

component.ts

registerForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      formData: this.formBuilder.array([this.createNewGroup()])
    });
   }

   createNewGroup() {
    return this.formBuilder.group({
      id: ['id'], 
      name: ['name'] 
    })
  }

  addNew(){
    let formArr=this.registerForm.get('formData') as FormArray;
    formArr.push(this.createNewGroup());
  }

   onSubmit(){
    console.log(this.registerForm.value); 
   }

Answer 2

One way to achieve this is by using the this.formBuilder.array method in Angular.

Check out this Stackblitz example for reference.

component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div formArrayName="formData">
        <div *ngFor="let dat of registerForm.get('formData').controls;let index = index;" [formGroupName]="index">
            <label>{{dat.get('name').value }}</label>
     <input type="text" formControlName="name" />  
    </div>
<button type="submit">Submit</button>
  </div>
</form>
<button type="button" (click)="addNew()">Add</button>

component.ts

registerForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      formData: this.formBuilder.array([this.createNewGroup()])
    });
   }

   createNewGroup() {
    return this.formBuilder.group({
      id: ['id'], 
      name: ['name'] 
    })
  }

  addNew(){
    let formArr=this.registerForm.get('formData') as FormArray;
    formArr.push(this.createNewGroup());
  }

   onSubmit(){
    console.log(this.registerForm.value); 
   }

Answer 3

Answer №2

To ensure proper control over an input field, it is essential to include an ID for control purposes, a name for labeling, and a value for setting the input value. This approach will prove beneficial when implementing a more dynamic solution.

Within your component, you can follow this structure:

formData = [{ id: 'firstName', name: 'firstName', value: '' },
  { id: 'lastName', name: 'lastName', value: '' },
  { id: 'address', name: 'address', value: '' },
  { id: 'emailid', name: 'emailid', value: '' }
  ]

constructor(private formBuilder: FormBuilder) {
    let formGroups: FormGroup[] = []; 
    for(let i = 0; i < this.formData.length; i++){
      formGroups.push(this.formBuilder.group({
          id: this.formData[i].id,
          name: this.formData[i].name,
          value: this.formData[i].value,
      }));
    }
    this.registerForm = this.formBuilder.group({
        array: this.formBuilder.array(formGroups)
    })
   }

   onSubmit(){
    console.log(this.registerForm.value); 
   }

In your HTML template, include the following:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div formArrayName="array">
    <div *ngFor="let dat of registerForm.get('array').controls;let i = index;" [formGroupName]="i">
        <label>{{dat.get('name').value}} </label>
        <input type="string" id={{dat.value.id}} #input formControlName="value">
    </div>
  </div>
</form>

<button><button>

Answer 4

To ensure proper control over an input field, it is essential to include an ID for control purposes, a name for labeling, and a value for setting the input value. This approach will prove beneficial when implementing a more dynamic solution.

Within your component, you can follow this structure:

formData = [{ id: 'firstName', name: 'firstName', value: '' },
  { id: 'lastName', name: 'lastName', value: '' },
  { id: 'address', name: 'address', value: '' },
  { id: 'emailid', name: 'emailid', value: '' }
  ]

constructor(private formBuilder: FormBuilder) {
    let formGroups: FormGroup[] = []; 
    for(let i = 0; i < this.formData.length; i++){
      formGroups.push(this.formBuilder.group({
          id: this.formData[i].id,
          name: this.formData[i].name,
          value: this.formData[i].value,
      }));
    }
    this.registerForm = this.formBuilder.group({
        array: this.formBuilder.array(formGroups)
    })
   }

   onSubmit(){
    console.log(this.registerForm.value); 
   }

In your HTML template, include the following:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div formArrayName="array">
    <div *ngFor="let dat of registerForm.get('array').controls;let i = index;" [formGroupName]="i">
        <label>{{dat.get('name').value}} </label>
        <input type="string" id={{dat.value.id}} #input formControlName="value">
    </div>
  </div>
</form>

<button><button>

Answer 5

Answer №3

You have the option to include controls in this manner.

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;

  formData = [{ id: 'firstName', name: 'firstName' },
  { id: 'lastName', name: 'lastName' },
  { id: 'address', name: 'address' },
  { id: 'emailid', name: 'emailid' }
  ]


  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      list: this.formBuilder.array([])
    });
  }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      list: this.formBuilder.array(
        this.formData.map(x => this.formBuilder.group({
          name: [x['name']],
          id: [x['id']]
        }))
      )
    })
  }

  onSubmit() {
    console.log(this.registerForm.value);
  }
}

Component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <span formArrayName="list">
  <div *ngFor="let dat of registerForm.get('list').controls;let index = index;" formGroupName="{{index}}">
     <label for="{{dat.name}}">{{dat.name }}</label>
     <input type="text" id="{{dat.get('id').value}}" formControlName="name" />  
    </div>
  </span>
<button type="submit">button</button>
</form>

Answer 6

You have the option to include controls in this manner.

component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;

  formData = [{ id: 'firstName', name: 'firstName' },
  { id: 'lastName', name: 'lastName' },
  { id: 'address', name: 'address' },
  { id: 'emailid', name: 'emailid' }
  ]


  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      list: this.formBuilder.array([])
    });
  }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      list: this.formBuilder.array(
        this.formData.map(x => this.formBuilder.group({
          name: [x['name']],
          id: [x['id']]
        }))
      )
    })
  }

  onSubmit() {
    console.log(this.registerForm.value);
  }
}

Component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <span formArrayName="list">
  <div *ngFor="let dat of registerForm.get('list').controls;let index = index;" formGroupName="{{index}}">
     <label for="{{dat.name}}">{{dat.name }}</label>
     <input type="text" id="{{dat.get('id').value}}" formControlName="name" />  
    </div>
  </span>
<button type="submit">button</button>
</form>

Answer 7

Answer №4

To add to Krishna's response, if you're looking to generate a formArray with data input, you can utilize two specific functions.

// Function to construct a formGroup with provided data or empty if there is none
createNewGroup(data): FormGroup {
    return this.formBuilder.group({
        id: [data ? data.id : null], 
        name: [data ? data.name : null] 
    })
}

// Function for creating the actual form

createForm(formData): FormGroup {
    // Generate an array of FormGroups,
    // If there is data, create a new group for each item in the data array
    // Otherwise, create an array with one element (null)
    let group = formData ? formData.map(d => this.createNewGroup(d)) 
                        : [this.createNewGroup(null)]

    return this.formBuilder.group({
         formData: this.formBuilder.array(group)
       });
}

Therefore, you have the flexibility to:

this.registerForm = createForm(this.formData) // Generate a form with existing data
this.registerForm = createForm(null) // Generate an empty form

Answer 8

To add to Krishna's response, if you're looking to generate a formArray with data input, you can utilize two specific functions.

// Function to construct a formGroup with provided data or empty if there is none
createNewGroup(data): FormGroup {
    return this.formBuilder.group({
        id: [data ? data.id : null], 
        name: [data ? data.name : null] 
    })
}

// Function for creating the actual form

createForm(formData): FormGroup {
    // Generate an array of FormGroups,
    // If there is data, create a new group for each item in the data array
    // Otherwise, create an array with one element (null)
    let group = formData ? formData.map(d => this.createNewGroup(d)) 
                        : [this.createNewGroup(null)]

    return this.formBuilder.group({
         formData: this.formBuilder.array(group)
       });
}

Therefore, you have the flexibility to:

this.registerForm = createForm(this.formData) // Generate a form with existing data
this.registerForm = createForm(null) // Generate an empty form

struggling to implement dynamic reactive forms with Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular4 - Div with ngIf doesn't respond to click event

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

Updating Angular Material theme variables during the build processIs this okay?

Generate several invoices with just a single click using TypeScript

Troubleshooting the malfunction of the Angular 2 Tour of Heroes project following the separation of the app

Applying ngClass to a row in an Angular material table

Tips for displaying HTML content dynamically in React using TypeScript after setting a stateVariable

The specified attribute "matListItemTitle" is invalid in this context

What's the best way to insert values into data binding within a Typescript/ Angular mat Table?

Determine the subtotal for a particular item using AngularJS

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

Is there a way to modify a single object within an array?

Utilizing Angular to import an SVG file from a backend and incorporate its content as a template

Guide to specifying the indexer type of a function argument as T[K] being of type X in order for t[k]=x to be a permissible expression

How can we utilize caching for an HTTP GET request in Angular 9 only when the navigator is offline?

How can I perform email validation using Angular 6?

Typescript with Angular: Despite having 7 values in the map, Map.get is returning undefined

Primeng - Displaying names in editable datatable with multiSelect feature

The process of upgrading all dependencies to a particular version

What is the best way to rid ourselves of unwanted values?