Add/Push and Remove Form fields dynamically with validation to FormArray with Reactive Forms in Angular

Step 1 :-

First we will create a project using below command :-

ng new myApp

Step 2 :-

Now we will add bootstrap cdn in our project so open "Index.html" file and follow below code

Index.html :-

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>HelloWorld</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

</head>

<body>

  <app-root></app-root>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</body>

</html>

Step 3 :-

Now we will create a HTML form template in "app.component.html", in this form we will add hobby form control dynamically, see below code.

app.component.html :-

<div class="container formContainerClass">

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

    <div class="form-group row">

        <label for="username" class="col-sm-2 col-form-label">Username</label>

        <div class="col-sm-10">

          <input type="text" id="username" formControlName="username"

                [ngClass]="{'classSubmitted':submitted}"

                class="form-control">

          <div *ngIf="submitted || signupForm.get('username').touched">

            <span *ngIf="!signupForm.get('username').valid" class="errMsg">Please enter a valid Username</span>

          </div>

        </div>

    </div>

    <div class="form-group row">

        <label for="email" class="col-sm-2 col-form-label">Email</label>

        <div class="col-sm-10">

          <input type="text" id="email" formControlName="email"

                  [ngClass]="{'classSubmitted':submitted}"

                  class="form-control">

          <div *ngIf="submitted || signupForm.get('email').touched">

            <span *ngIf="!signupForm.get('email').valid" class="errMsg">Please enter valid Email</span>

          </div>

        </div>

    </div>

    <div class="form-group row" formArrayName="hobbies">

      <label for="hobby" class="col-sm-2 col-form-label">Hobby</label>

      <div class="col-sm-10">

        <button class="btn btn-default" type="button" (click)="onAddHobby()">Add Hobby</button>

      </div>

      <div *ngFor="let hobbyControl of signupForm.get('hobbies').controls; let i=index"

            [formGroupName]="i"  class="col-sm-12">

            <div class="col-sm-2"></div>

            <div class="col-sm-8">

              <input type="text" class="form-control" formControlName="hobby" 

                [ngClass]="{'classSubmitted':hobbySubmit}"/>

              <span *ngIf="hobbyControl.get('hobby').errors?.required" 

                    class="errMsg">Please put hobby</span>

            </div>

            <div class="col-sm-2">

              <button type="button" class="btn btn-danger" (click)="onDeleteHobby(i)">X</button>

            </div>

      </div>

    </div>

    <div class="form-group row">

        <div class="col-sm-10 offset-sm-2">

            <button type="submit" class="btn btn-primary">Submit</button>

        </div>

    </div>

  </form>

</div>

app.component.ts :-

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

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent implements OnInit {

  submitted = false;

  hobbySubmit = false;

  constructor() { }

  genders = ['male','female'];

  signupForm : FormGroup;

  ngOnInit(){

    this.signupForm = new FormGroup({

        'username': new FormControl(null,Validators.required),

        'email':new FormControl(null,[Validators.required,Validators.email]),

        'gender':new FormControl('male'),

        'hobbies':new FormArray([])

});

}

  onSubmit(){

    this.submitted = true;

    if(!this.signupForm.valid){

      return;

}

    alert("Form submitted !!");

    console.log(this.signupForm);

}

  onAddHobby(){

    this.hobbySubmit = true;

    const control = new FormControl('',Validators.required);

    (<FormArray>this.signupForm.get('hobbies')).push(

      new FormGroup({

        'hobby':control

})

);

}

  onDeleteHobby(index:number){

    (<FormArray>this.signupForm.get('hobbies')).removeAt(index);

}

}

Step 4 :-

Now we will add some styling for our form so open "style.css" file

style.css :-

input.classSubmitted.ng-invalid

{

  border:1px solid #f00;

}

.errMsg{

    color: #f00;

}

.formContainerClass{

  background-color: antiquewhite;

  padding-top: 10px;

}

Step 5 :-

See my form example

LearnTechWithEasy