Include name component in main application

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>

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({});
+  }
 }