Form Array Demo

forms/src/app/app.component.html

@@ -6,3 +6,5 @@ <h1>{{title}}</h1>
 <login-model-form></login-model-form>
 
 <model-form></model-form>
+
+<phone-numbers></phone-numbers>

forms/src/app/app.module.ts

@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { LoginFormComponent } from './login-form/login-form.component';
 import { ModelFormComponent } from './model-form/model-form.component';
 import { LoginModelFormComponent } from './login-model-form/login-model-form.component';
+import { ArrayFormComponent } from './array-form/array-form.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginFormComponent,
     ModelFormComponent,
-    LoginModelFormComponent
+    LoginModelFormComponent,
+    ArrayFormComponent
   ],
   imports: [
     BrowserModule,

forms/src/app/array-form/array-form.component.css

@@ -0,0 +1,21 @@
+:host {
+    display: flex;
+}
+
+.container {
+    background-color: #E2CEFF;
+}
+
+button[disabled] {
+    color: gray;
+}
+
+.output {
+    padding: 10px;
+    border-radius: 10px;
+    background: #f4e6ff;
+}
+
+.error {
+    color: red;
+}

forms/src/app/array-form/array-form.component.html

@@ -0,0 +1,27 @@
+<div class="container ph4 pb4 black-80 br3 ma3 center w-70">
+  <p class="f3">New Client (Dynamic Fields with FormArrays)</p>
+    <div>
+      <div class="m2" *ngFor="let item of form?.controls; let i = index">
+      <input type="text"
+             [formControl]="item"
+             placeholder="{{placeholders[i]}}"
+             [ngClass]="{
+              'is-error': item.hasError('minLength') && item.dirty
+             }"
+             class="pa1 mb1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+        <div class="error mt3" *ngIf="item.hasError('minLength')">Location must be greater than 5 characters!</div>
+    </div>
+
+    <button (click)="addLocation()" >Add a Location</button> <button (click)="addEmail()">Add Email</button>
+
+    <div class="mb5">
+      <div class="mt2">
+        <button (click)="save()" class="link mr2 br2 ba bw1 bg-black yellow b--black fl" [disabled]="!form.valid">Save</button>
+        <div *ngIf="!form.valid" class="error mt2">Cannot save, location has to be greater than 5 characters</div>
+      </div>
+    </div>
+
+    <div class="mt2 output">
+      <pre>{{form.value}}</pre>
+    </div>
+</div>

forms/src/app/array-form/array-form.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'phone-numbers',
+  templateUrl: './array-form.component.html',
+  styleUrls: ['./array-form.component.css']
+})
+export class ArrayFormComponent {
+  form;
+  placeholders = [
+    'Name',
+    'Job'
+  ];
+  output;
+
+  constructor() {
+    this.form= new FormArray([
+      new FormControl(''),
+      new FormControl('')
+    ]);
+  }
+
+  addEmail() {
+    // if email field has already been added, don't add it again
+    if (this.placeholders.indexOf('Email') === -1) {
+      this.form.push(new FormControl(''));
+      this.placeholders.push('Email');
+    }
+  }
+
+  addLocation() {
+    // if location field has already been added, don't add it again
+    if (this.placeholders.indexOf('Location') === -1) {
+      this.form.push(new FormControl('', Validators.minLength(5)));
+      this.placeholders.push('Location');
+    }
+  }
+
+  save() {
+    this.output = this.form.value;
+  }
+
+}

forms/src/app/model-form/model-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
 
 @Component({
   selector: 'model-form',
@@ -8,20 +8,28 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 })
 export class ModelFormComponent implements OnInit {
 
+  welcomeMessage: string;
   fg: FormGroup;
 
   constructor(formBuilder: FormBuilder) {
     this.fg = formBuilder.group({
       'name': ['Tammy', Validators.required],
       'surname': ['Trinh', Validators.required],
       'email': ['tam@york.tv', Validators.required],
-      'gender': ['female', Validators.required]
+      'gender': ['female', Validators.required],
+      'greeting': ['Greet with message'],
+      'welcome': new FormControl({disabled: true})
     });
   }
 
   ngOnInit() {
   }
-
+/*
+  enableWelcomeMessage () {
+    this.fg.addControl('message');
+    this.welcomeMessage = 'congrats on remembering your password!';
+  }
+*/
   onSubmit(value) {
     console.log(JSON.stringify(value));
   }