Dynamic form controls

Author: gopinav

reactive-forms/src/app/app.component.html

@@ -24,10 +24,14 @@ <h2>Registration Form</h2>
       <small class="text-danger" *ngIf="registrationForm.errors?.misMatch">Passwords do not match</small>
     </div>
 
-    <div class="form-group">
+    <div formArrayName="alternateEmails" class="form-group">
       <label>Email</label>
+      <button class="btn btn-secondary btn-sm m-2" (click)="addAlternateEmail()">Add e-mail</button>
       <input type="text" [class.is-invalid]="email.invalid && email.touched" formControlName="email" class="form-control">
       <small class="text-danger" [class.d-none]="email.valid || email.untouched">Email is required</small>
+      <div *ngFor="let email of alternateEmails.controls; let i=index">
+        <input type="text" class="form-control my-1" [formControlName]="i">
+      </div>
     </div>
 
     <div class="form-check mb-3">

reactive-forms/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
 import { FormBuilder } from '@angular/forms';
 import { ForbiddenNameValidator } from './shared/user-name.validator';
 import { PasswordValidator } from './shared/password.validator';
@@ -35,7 +35,8 @@ export class AppComponent implements OnInit {
         city: [''],
         state: [''],
         postalCode: ['']
-      })
+      }),
+      alternateEmails: this.fb.array([])
     }, { validator: PasswordValidator });
 
     this.registrationForm.get('subscribe').valueChanges
@@ -58,6 +59,14 @@ export class AppComponent implements OnInit {
     return this.registrationForm.get('email');
   }
 
+  get alternateEmails() {
+    return this.registrationForm.get('alternateEmails') as FormArray;
+  }
+
+  addAlternateEmail() {
+    this.alternateEmails.push(this.fb.control(''));
+  }
+
   loadAPIData() {
     // this.registrationForm.setValue({
     //   userName: 'Bruce',