How to add input fields using a add button in Angular?

Question

So, I have an existing input fields for Passenger details(name, address, number, email). What I want to do is to add another passenger details input using an add button. So far here is my code for the button:

<div class="center">
          <button
          type="button"
          class="next-button"
          mat-flat-button
          matTooltip="Add new passenger"
          matTooltipClass="tooltipClass"
          matTooltipPosition="below"
          (click)=""
        >
          <mat-icon>add</mat-icon>
        </button>

Answer 1

Create an array to store passenger details such as name, email, number, and address and iterate form using *ngFor.push new elements while clicking on the add button. Following are the steps.

  passengerForm = [
    {
      name: '',
      address: '',
      number: '',
      email: ''
    }
  ];

Iterate form based on passengerForm array.

<div *ngFor="let item of passengerForm">
  <div class="row">
    <div class="col-4">
      <input [(ngModel)]="item.name">
    </div>
    <div class="col-4">
      <input [(ngModel)]="item.number">

    </div>
    <div class="col-4">
      <input [(ngModel)]="item.email">

    </div>
    <div class="col-4">
      <input [(ngModel)]="item.address">
    </div>
  </div>
</div>

Create a function to push new passenger details.

addForm() {
    this.passengerForm.push({
      name: '',
      address: '',
      number: '',
      email: ''
    });
  }

<button (click)="addForm()">add</button></button>

For more : https://stackblitz.com/edit/angular-ivy-kry5ap?file=src%2Fapp%2Fapp.component.html

Answer 2

This is called a dynamic form. You can do it with Reactive Forms (though in a more verbose way than in Template-Driven). Use Angular's formBuilder and formArray:

...
data = [{ name: '', address: '', phone: '', email: '' }]

form: FormGroup = this.formBuilder.group({
  contacts: this.formBuilder.array(data.map(
    contact => this.formBuilder.group(contact)
  ))
});

get contacts(): FormArray {
  return this.form.get('contacts') as FormArray;
}

addContact() {
  this.contacts.push(this.formBuilder.group({
    name: null,
    address: null,
    phone: null,
    email: null
  }))
}
...

And a little tricky stuff in the template:

<form [formGroup]="form" 
  <ng-container formArrayName="contacts" *ngFor="let contact of contacts.controls; index as i">
    <ng-container [formGroupName]="i">
      <input formControlName="name">
      <input formControlName="address">
      <input formControlName="phone">
      <input formControlName="email">
    </ng-container>
  </ng-container>
  
  <button type="button" (click)="addContact()">Add</button>
  ...
</form>

The example (Stackblitz) can be found here.

Answer 3

You can do like below.

app.component.ts

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

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

  ngOnInit() {
    this.form = new FormGroup({
      passenger: new FormArray([
        new FormGroup({
          name: new FormControl(''),
          address: new FormControl(''),
          number: new FormControl(''),
          email: new FormControl('')
        })
      ])
    });

    console.log(this.form);
  }

  get passenger(): FormArray {
    return this.form.get('passenger') as FormArray;
  }

  addPassenger() {
    this.passenger.push(
      new FormGroup({
        name: new FormControl(''),
        address: new FormControl(''),
        number: new FormControl(''),
        email: new FormControl('')
      })
    );
  }
}

app.component.html

<form [formGroup]="form">
  <div formArrayName="passenger">
    <div
      *ngFor="let passengerGroup of passenger?.controls; let i = index"
      [formGroupName]="i"
    >
      <h3>passenger - {{i + 1}}</h3>
      <input type="text" formControlName="name" placeholder="name" />
      <input type="text" formControlName="address" placeholder="address" />
      <input type="text" formControlName="number" placeholder="number" />
      <input type="text" formControlName="email" placeholder="email" />
    </div>
  </div>

  <button (click)="addPassenger()">Add Passenger</button>
</form>

form - {{form.value | json}}

Working demo

Let me know if you have any doubt.