New form types

forms/src/app/app.component.html

@@ -1,8 +1,9 @@
 <div class="ba br4 p2 pl3 bg-purple white">
   <h1>{{title}}</h1>
 </div>
-<login-form></login-form>
 
 <login-model-form></login-model-form>
 
 <model-form></model-form>
+
+<array-form></array-form>

forms/src/app/app.module.ts

@@ -4,16 +4,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 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,25 @@
+:host {
+  display: flex;
+}
+
+.container {
+  background-color: #E2CEFF;
+}
+
+button[disabled] {
+  color: gray;
+}
+
+.output {
+  padding: 10px;
+  border-radius: 10px;
+  background: #f4e6ff;
+}
+
+.error {
+  color: red;
+}
+
+.notify {
+  color: red;
+}

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

@@ -0,0 +1,39 @@
+<div class="container ph4 pb4 black-80 br3 ma3 center w-50">
+  <p class="f3">New Client (Dynamic Fields with FormArrays)</p>
+  <form [formGroup]="form" (ngSubmit)="save(); reset()" class="measure center">
+
+    <div class="m2">
+      <label for="name" class="db fw6 lh-copy f5">Name</label>
+      <input type="text"
+              formControlName="name"
+              class="pa1 mb1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+      <p *ngIf="form.controls.name.errors && !form.controls.name.untouched" class="notify">Name is required.</p>
+
+      <label for="address" class="db fw6 lh-copy f5">Address</label>
+      <input type="text"
+              formControlName="address"
+              class="pa1 mb1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+      <p *ngIf="form.controls.address.errors && !form.controls.address.untouched" class="notify">Address is required.</p>
+    </div>
+    <div formArrayName="emails">
+      <label class="db fw6 lh-copy f5" *ngIf="emailsControls.controls.length !== 0">Email</label>
+      <div class="m2" *ngFor="let item of emailsControls.controls; let i=index">
+        <input type="text"
+          [placeholder]="'Email ' + (i + 1)"
+          [formControlName]="i"
+          [ngClass]="{
+            'error': item.hasError() && item.dirty
+          }"
+          class="pa1 mb1 input-reset ba hover-bg-washed-blue hover-dark-blue w-100">
+      </div>
+    </div>
+
+    <button type="button" class="link mr2 br2 ba bw1 bg-black yellow b--black" (click)="addEmail()">Add Email</button>
+
+    <div class="mb5 mt3">
+      <div class="mt2">
+        <button type="submit" class="link mr2 br2 ba bw1 bg-black yellow b--black fl" [disabled]="!form.valid">Save</button>
+      </div>
+    </div>
+  </form>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArrayFormComponent } from './array-form.component';
+
+describe('ArrayFormComponent', () => {
+  let component: ArrayFormComponent;
+  let fixture: ComponentFixture<ArrayFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ArrayFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArrayFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormControl, Validators, FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'array-form',
+  templateUrl: './array-form.component.html',
+  styleUrls: ['./array-form.component.css']
+})
+export class ArrayFormComponent {
+  form: FormGroup;
+
+  get emailsControls(): FormArray {
+    return this.form.get('emails') as FormArray;
+  }
+
+  set emailsControls(formArray: FormArray) {
+    this.form.setControl('emails', formArray);
+  }
+
+  constructor(private formBuilder: FormBuilder) {
+    this.form = this.formBuilder.group({
+      name: ['', Validators.required],
+      address: ['', Validators.required],
+      emails: this.formBuilder.array([]),
+    });
+  }
+
+  addEmail() {
+    this.emailsControls.push(new FormControl(''));
+  }
+
+  save() {
+    console.log(this.form.value);
+  }
+
+  reset() {
+    this.emailsControls = this.formBuilder.array([]);
+    this.form.reset();
+  }
+
+}

forms/src/app/login-model-form/login-model-form.component.html

@@ -1,4 +1,4 @@
-<div class="container ph4 pb4 black-80 br3 ma3 center w-70">
+<div class="container ph4 pb4 black-80 br3 ma3 center w-50">
   <p class="f3">Login (Template based)</p>
   <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value); formRef.reset()" class="measure center">
     <div class="mt3">

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

@@ -1,6 +1,6 @@
-<div class="container ph4 pb4 black-80 br3 ma3 center w-70">
+<div class="container ph4 pb4 black-80 br3 ma3 center w-50">
   <p class="f3">New Client (Model driven)</p>
-  <form [formGroup]="fg" (ngSubmit)="onSubmit(fg.value); fg.reset()">
+  <form [formGroup]="fg" (ngSubmit)="onSubmit(fg.value); fg.reset()" class="measure center">
     <div>
       <label for="name" class="db fw6 lh-copy f5">Name</label>
       <input type="text"