From eb920abce8d3fe8e14bcd55cb4e72545ae46f900 Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Tue, 27 Aug 2019 23:19:24 -0400
Subject: [PATCH] Include name component in main application

---
 apps/parent-form/src/app/app.component.html | 37 +++++----------------
 apps/parent-form/src/app/app.component.ts   | 32 ++++++++++++++++++
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/apps/parent-form/src/app/app.component.html b/apps/parent-form/src/app/app.component.html
index 9357f3f..755f966 100644
--- a/apps/parent-form/src/app/app.component.html
+++ b/apps/parent-form/src/app/app.component.html
@@ -1,29 +1,10 @@
-<div style="text-align:center">
-  <h1>Welcome to {{ title }}!</h1>
-  <img
-    width="450"
-    src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
-  />
+<form [formGroup]="form">
+  <nested-forms-name
+    [name]="contact.name"
+    [parent]="form"
+  ></nested-forms-name>
+</form>
+<hr>
+<div>
+  {{ form.value | json }}
 </div>
-
-<p>
-  This is an Angular app built with <a href="https://nx.dev/angular">Nx</a>.
-</p>
-<p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
-
-<h2>Quick Start & Documentation</h2>
-
-<ul>
-  <li>
-    <a href="https://nx.dev/angular/getting-started/what-is-nx"
-      >10-minute video showing all Nx features</a
-    >
-  </li>
-  <li>
-    <a href="https://nx.dev/angular/tutorial/01-create-application"
-      >Interactive tutorial</a
-    >
-  </li>
-</ul>
-
-<router-outlet></router-outlet>
diff --git a/apps/parent-form/src/app/app.component.ts b/apps/parent-form/src/app/app.component.ts
index 6d7a4e2..8b45865 100644
--- a/apps/parent-form/src/app/app.component.ts
+++ b/apps/parent-form/src/app/app.component.ts
@@ -1,4 +1,6 @@
+import { Contact } from '@nested-forms/contact-model';
 import { Component } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'nested-forms-root',
@@ -7,4 +9,34 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'parent-form';
+
+  contact: Contact = {
+    name: {
+      firstName: 'John',
+      lastName: 'Public',
+      middleName: 'Q',
+      prefix: 'Mr',
+      suffix: 'III',
+    },
+    addresses: [
+      {
+        line_1: '123 Main Street',
+        city: 'New York',
+        state: 'NY',
+        postalCode: '12345',
+      },
+      {
+        line_1: '123 South Street',
+        city: 'Boston',
+        state: 'MA',
+        postalCode: '54321',
+      },
+    ],
+  };
+
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({});
+  }
 }