From ba7c81f9836d1f044777ad9b9f4bd9a0bcaef17a Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Wed, 28 Aug 2019 00:17:08 -0400
Subject: [PATCH] Add address list components to form

---
 .../address-list/address-list.component.css   |  0
 .../address-list/address-list.component.html  |  3 ++
 .../address-list.component.spec.ts            | 28 ++++++++++++++++
 .../address-list/address-list.component.ts    | 26 +++++++++++++++
 .../src/app/address/address.component.css     |  0
 .../src/app/address/address.component.html    | 26 +++++++++++++++
 .../src/app/address/address.component.spec.ts | 27 +++++++++++++++
 .../src/app/address/address.component.ts      | 33 +++++++++++++++++++
 apps/parent-form/src/app/app.component.html   |  8 +++--
 .../parent-form/src/app/app.component.spec.ts |  4 ++-
 apps/parent-form/src/app/app.module.ts        |  4 ++-
 11 files changed, 155 insertions(+), 4 deletions(-)
 create mode 100644 apps/parent-form/src/app/address-list/address-list.component.css
 create mode 100644 apps/parent-form/src/app/address-list/address-list.component.html
 create mode 100644 apps/parent-form/src/app/address-list/address-list.component.spec.ts
 create mode 100644 apps/parent-form/src/app/address-list/address-list.component.ts
 create mode 100644 apps/parent-form/src/app/address/address.component.css
 create mode 100644 apps/parent-form/src/app/address/address.component.html
 create mode 100644 apps/parent-form/src/app/address/address.component.spec.ts
 create mode 100644 apps/parent-form/src/app/address/address.component.ts

diff --git a/apps/parent-form/src/app/address-list/address-list.component.css b/apps/parent-form/src/app/address-list/address-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/apps/parent-form/src/app/address-list/address-list.component.html b/apps/parent-form/src/app/address-list/address-list.component.html
new file mode 100644
index 0000000..772fae2
--- /dev/null
+++ b/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>
diff --git a/apps/parent-form/src/app/address-list/address-list.component.spec.ts b/apps/parent-form/src/app/address-list/address-list.component.spec.ts
new file mode 100644
index 0000000..0af6837
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/apps/parent-form/src/app/address-list/address-list.component.ts b/apps/parent-form/src/app/address-list/address-list.component.ts
new file mode 100644
index 0000000..448b02a
--- /dev/null
+++ b/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);
+    }
+  }
+
+}
diff --git a/apps/parent-form/src/app/address/address.component.css b/apps/parent-form/src/app/address/address.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/apps/parent-form/src/app/address/address.component.html b/apps/parent-form/src/app/address/address.component.html
new file mode 100644
index 0000000..d6bac5a
--- /dev/null
+++ b/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>
diff --git a/apps/parent-form/src/app/address/address.component.spec.ts b/apps/parent-form/src/app/address/address.component.spec.ts
new file mode 100644
index 0000000..25648c8
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/apps/parent-form/src/app/address/address.component.ts b/apps/parent-form/src/app/address/address.component.ts
new file mode 100644
index 0000000..65ef118
--- /dev/null
+++ b/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);
+    }
+  }
+
+}
diff --git a/apps/parent-form/src/app/app.component.html b/apps/parent-form/src/app/app.component.html
index 755f966..8c842cc 100644
--- a/apps/parent-form/src/app/app.component.html
+++ b/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>
diff --git a/apps/parent-form/src/app/app.component.spec.ts b/apps/parent-form/src/app/app.component.spec.ts
index 1f20bd8..447d5b1 100644
--- a/apps/parent-form/src/app/app.component.spec.ts
+++ b/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();
   }));
 
diff --git a/apps/parent-form/src/app/app.module.ts b/apps/parent-form/src/app/app.module.ts
index 4e5309e..c9cef15 100644
--- a/apps/parent-form/src/app/app.module.ts
+++ b/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' }),