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

Explore the features of Angular4 including the router and optional children parameters

What is the best method for extracting the selected value from a Dropdown in ng-bootstrap?

Concealing forms within an Angular 5 application

The favicon refuses to load

When the @Input() contains an unaltered boolean value, it does not initiate change detection

Validating dates in TypeScript

Tips for refreshing the current page in Angular without being redirected to the login page

Getting the Value of a CSS Class through Form Name in Angular

What is the most efficient method for integrating third-party components just once in an Angular 8 application?

Typescript: creating index signatures for class properties

What could be causing ng-show to fail to hide a div and its content on my page?

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

Dealing with a sequence of deletions in Angular 4

Angular expands the HTML of the parent component

Accessing dynamic data beyond the subscribe method function

Why are my variables resetting in Angular after ngAfterViewInit?

Creating custom observables by utilizing ViewChildren event and void functions in Angular 12: A step-by-step guide

Typescript: The type 'Observable<{}>' cannot be assigned to the type 'Observable'

Setting up a passthrough for a directory of external resources in Angular

Executing the function in Ionic 4 when the events are absent