How to Dynamically Add and Remove Form Fields in Angular?

How to Dynamically Add and Remove Form Fields in Angular?

In this post we will give you information about How to Dynamically Add and Remove Form Fields in Angular?. Hear we will give you detail about How to Dynamically Add and Remove Form Fields in Angular?And how to use it also give you demo for it if it is necessary.

This tutorial is focused on how to add remove input fields dynamically angular. this example will help you adding form fields dynamically in angular. if you want to see example of dynamically add and remove form input fields with angular then you are a right place. This article goes in detailed on how to dynamically add and remove form fields in angular.

I will show you very simple and step by step example of add more input fields dynamic in angular 6, anuglar 7, angular 8 and angular 9 application.

In this example we will create form with product name and user can add multiple quantity with price. we will use formgroup and formarray to create dynamic form in angular application.

You can see bellow layout for demo. let’s follow bellow step.

Import FormsModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

updated Ts File

In this file we will first import FormGroup, FormControl,FormArray and FormBuilder from angular forms library.

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms'

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

productForm: FormGroup;

constructor(private fb:FormBuilder) {

this.productForm = this.fb.group({

name: '',

quantities: this.fb.array([]) ,

});

}

quantities() : FormArray {

return this.productForm.get("quantities") as FormArray

}

newQuantity(): FormGroup {

return this.fb.group({

qty: '',

price: '',

})

}

addQuantity() {

this.quantities().push(this.newQuantity());

}

removeQuantity(i:number) {

this.quantities().removeAt(i);

}

onSubmit() {

console.log(this.productForm.value);

}

}

Template Code:

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

src/app/app.component.html

<div >

<h1>Angular FormArray Example - ItSolutionStuff.com</h1>

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">

<p>

<label for="name">Product Name:</label>

<input type="text" id="name" name="name" formControlName="name" >

</p>

<table formArrayName="quantities">

<tr>

<th colspan="2">Add Multiple Quantity:</th>

<th width="150px"><button type="button" (click)="addQuantity()" >Add More</button></th>

</tr>

<tr *ngFor="let quantity of quantities().controls; let i=index" [formGroupName]="i">

<td>

Quantity :

<input type="text" formControlName="qty" >

</td>

<td>

Price:

<input type="text" formControlName="price" >

</td>

<td>

<button (click)="removeQuantity(i)" >Remove</button>

</td>

</tr>

</table>

<button type="submit" >Submit</button>

</form>

<br/>

{{this.productForm.value | json}}

</div>

Now you can run your application using following command:

ng serve

I hope it can help you…

Hope this code and post will helped you for implement How to Dynamically Add and Remove Form Fields in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

64  +    =  68

We accept paid advance and paid guest Posting on our Site : Contact US