apps/baseline/src/app/app.component.html

@@ -1,5 +1,5 @@
 <form *ngIf="form" [formGroup]="form">
-  <ng-container formGroupName="name">
+  <ng-container formGroupName="nameGroup">
     <div>
       <label for="firstName">First Name: </label>
       <input name="firstName" formControlName="firstName">

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

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

libs/contact/src/index.ts

@@ -1,4 +1,4 @@
 export * from './lib/contact-model';
-export * from './lib/services/contact.service';
+export * from './lib/contact.service';
 export * from './lib/services/contact-form.service';
 export * from './lib/contact.module';

libs/contact/src/lib/contact-model.ts

@@ -1,20 +1,20 @@
 export interface Name {
-  firstName: string;
-  lastName: string;
-  middleName: string;
-  prefix: string;
-  suffix: string;
+  firstName?: string;
+  lastName?: string;
+  middleName?: string;
+  prefix?: string;
+  suffix?: string;
 }
 
 export interface Address {
-  line_1: string;
-  line_2: string;
-  city: string;
-  state: string;
-  postalCode: string;
+  line_1?: string;
+  line_2?: string;
+  city?: string;
+  state?: string;
+  postalCode?: string;
 }
 
 export interface Contact {
-  name: Name;
-  addresses: Address[];
+  name?: Name;
+  addresses?: Address[];
 }

libs/contact/src/lib/contact.module.ts

@@ -1,6 +1,6 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ContactService } from './services/contact.service';
+import { ContactService } from './contact.service';
 import { ContactFormService } from './services/contact-form.service';
 
 @NgModule({

libs/contact/src/lib/contact.service.spec.ts

@@ -1,4 +1,4 @@
-import { Contact } from '../contact-model';
+import { Contact } from './contact-model';
 import { TestBed, async } from '@angular/core/testing';
 
 import { ContactService } from './contact.service';

libs/contact/src/lib/contact.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Contact } from '../contact-model';
+import { Contact } from './contact-model';
 import { Observable, of } from 'rxjs';
 
 const contact: Contact = {
@@ -14,14 +14,12 @@ const contact: Contact = {
   addresses: [
     {
       line_1: '123 Main Street',
-      line_2: null,
       city: 'New York',
       state: 'NY',
       postalCode: '12345',
     },
     {
       line_1: '123 South Street',
-      line_2: null,
       city: 'Boston',
       state: 'MA',
       postalCode: '54321',

libs/contact/src/lib/services/contact-form.service.ts

@@ -14,7 +14,7 @@ export class ContactFormService {
     const addresses: FormArray = this.fb.array([]);
 
     const group = this.fb.group({
-      name: this.fb.group({
+      nameGroup: this.fb.group({
         firstName: [name ? name.firstName : ''],
         lastName: [name ? name.lastName : ''],
         middleName: [name ? name.middleName : ''],