Create and hook up form components

apps/global-form/src/app/address-list/address-list.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let addr of addressArray?.controls">
+  <nested-forms-address [addressGroup]="addr"></nested-forms-address>
+</ng-container>

apps/global-form/src/app/address-list/address-list.component.spec.ts

@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AddressComponent } from './../address/address.component';
+import { AddressListComponent } from './address-list.component';
+
+describe('AddressListComponent', () => {
+  let component: AddressListComponent;
+  let fixture: ComponentFixture<AddressListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
+      declarations: [ AddressListComponent, AddressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddressListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/global-form/src/app/address-list/address-list.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormArray } from '@angular/forms';
+
+@Component({
+  selector: 'nested-forms-address-list',
+  templateUrl: './address-list.component.html',
+  styleUrls: ['./address-list.component.css']
+})
+export class AddressListComponent implements OnInit {
+  @Input() addressArray: FormArray;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

apps/global-form/src/app/address/address.component.html

@@ -0,0 +1,27 @@
+<form *ngIf="addressGroup" [formGroup]="addressGroup">
+    <div>
+      <label for="line1">Line 1: </label>
+      <input name="line1" formControlName="line1">
+    </div>
+  
+    <div>
+      <label for="line2">Line 2: </label>
+      <input name="line2" formControlName="line2">
+    </div>
+  
+    <div>
+      <label for="city">City: </label>
+      <input name="city" formControlName="city">
+    </div>
+  
+    <div>
+      <label for="state">State: </label>
+      <input name="state" formControlName="state">
+    </div>
+  
+    <div>
+      <label for="postalCode">Postal Code: </label>
+      <input name="postalCode" formControlName="postalCode">
+    </div>
+  </form>
+  

apps/global-form/src/app/address/address.component.spec.ts

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

apps/global-form/src/app/address/address.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'nested-forms-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.css']
+})
+export class AddressComponent implements OnInit {
+  @Input() addressGroup: FormGroup;
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

apps/global-form/src/app/app.component.html

@@ -1,5 +1,6 @@
 <form [formGroup]="form">
   <nested-forms-name [nameGroup]="form.get('nameGroup')"></nested-forms-name>
+  <nested-forms-address-list [addressArray]="form.get('addresses')"></nested-forms-address-list>
 </form>
 <hr />
 <pre>

apps/global-form/src/app/app.component.spec.ts

@@ -3,6 +3,8 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NameComponent } from './name/name.component';
+import { AddressListComponent } from './address-list/address-list.component';
+import { AddressComponent } from './address/address.component';
 import { ContactModule } from '@nested-forms/contact';
 
 describe('AppComponent', () => {
@@ -13,7 +15,7 @@ describe('AppComponent', () => {
         ReactiveFormsModule,
         ContactModule.forRoot()
       ],
-      declarations: [AppComponent, NameComponent]
+      declarations: [AppComponent, NameComponent, AddressComponent, AddressListComponent]
     }).compileComponents();
   }));
 

apps/global-form/src/app/app.module.ts

@@ -6,9 +6,11 @@ import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NameComponent } from './name/name.component';
 import { ContactModule } from '@nested-forms/contact';
+import { AddressListComponent } from './address-list/address-list.component';
+import { AddressComponent } from './address/address.component';
 
 @NgModule({
-  declarations: [AppComponent, NameComponent],
+  declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot([], { initialNavigation: 'enabled' }),

apps/global-form/src/app/name/name.component.html

@@ -1 +1,27 @@
-<p>name works!</p>
+<form *ngIf="nameGroup" [formGroup]="nameGroup">
+    <div>
+      <label for="firstName">First Name: </label>
+      <input name="firstName" formControlName="firstName">
+    </div>
+  
+    <div>
+      <label for="lastName">Last Name: </label>
+      <input name="lastName" formControlName="lastName">
+    </div>
+  
+    <div>
+      <label for="middleName">Middle Name: </label>
+      <input name="middleName" formControlName="middleName">
+    </div>
+  
+    <div>
+      <label for="prefix">Prefix: </label>
+      <input name="prefix" formControlName="prefix">
+    </div>
+  
+    <div>
+      <label for="suffix">Suffix: </label>
+      <input name="suffix" formControlName="suffix">
+    </div>
+    </form>
+  

apps/global-form/src/app/name/name.component.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { NameComponent } from './name.component';
 
@@ -8,6 +9,7 @@ describe('NameComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
       declarations: [NameComponent]
     }).compileComponents();
   }));