Add address list components to form

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

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let addr of addresses">
+  <nested-forms-address [parent]="arrayGroup" [address]="addr"></nested-forms-address>
+</ng-container>

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

@@ -0,0 +1,28 @@
+import { AddressComponent } from './../address/address.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddressListComponent } from './address-list.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+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/parent-form/src/app/address-list/address-list.component.ts

@@ -0,0 +1,26 @@
+import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
+import { Address } from '@nested-forms/contact-model';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'nested-forms-address-list',
+  templateUrl: './address-list.component.html',
+  styleUrls: ['./address-list.component.css']
+})
+export class AddressListComponent implements OnInit {
+
+  @Input() addresses: Address[];
+  @Input() parent: FormGroup;
+
+  arrayGroup: FormArray;
+
+  constructor(private fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.arrayGroup = this.fb.array([]);
+    if (this.parent) {
+      this.parent.addControl('addresses', this.arrayGroup);
+    }
+  }
+
+}

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

@@ -0,0 +1,26 @@
+<form [formGroup]="group">
+  <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/parent-form/src/app/address/address.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddressComponent } from './address.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+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/parent-form/src/app/address/address.component.ts

@@ -0,0 +1,33 @@
+import { FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { Address } from '@nested-forms/contact-model';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'nested-forms-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.css']
+})
+export class AddressComponent implements OnInit {
+
+  @Input() address: Address;
+  @Input() parent: FormArray;
+
+  group: FormGroup;
+
+  constructor(private fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.group = this.fb.group({
+      line1: [this.address ? this.address.line_1 : ''],
+      line2: [this.address ? this.address.line_2 : ''],
+      city: [this.address ? this.address.city : ''],
+      state: [this.address ? this.address.state : ''],
+      postalCode : [this.address ? this.address.postalCode : ''],
+    });
+
+    if (this.parent) {
+      this.parent.push(this.group);
+    }
+  }
+
+}

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

@@ -3,8 +3,12 @@
     [name]="contact.name"
     [parent]="form"
   ></nested-forms-name>
+  <nested-forms-address-list
+    [addresses]="contact.addresses"
+    [parent]="form"
+  ></nested-forms-address-list>
 </form>
 <hr>
-<div>
+<pre>
   {{ form.value | json }}
-</div>
+</pre>

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

@@ -1,3 +1,5 @@
+import { AddressComponent } from './address/address.component';
+import { AddressListComponent } from './address-list/address-list.component';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -8,7 +10,7 @@ describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, ReactiveFormsModule],
-      declarations: [AppComponent, NameComponent]
+      declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent]
     }).compileComponents();
   }));
 

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

@@ -5,9 +5,11 @@ import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NameComponent } from './name/name.component';
+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' }),