Build form from contact model data

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

@@ -3,11 +3,16 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NameComponent } from './name/name.component';
+import { ContactModule } from '@nested-forms/contact';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, ReactiveFormsModule],
+      imports: [
+        RouterTestingModule,
+        ReactiveFormsModule,
+        ContactModule.forRoot()
+      ],
       declarations: [AppComponent, NameComponent]
     }).compileComponents();
   }));
@@ -17,5 +22,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });

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

@@ -1,23 +1,66 @@
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
-import { Component } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Contact, ContactService } from '@nested-forms/contact';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'nested-forms-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
+  contact: Contact;
   form: FormGroup;
 
-  constructor(private fb: FormBuilder) {
+  private subscription: Subscription;
-    this.form = this.fb.group({
+
+  constructor(private fb: FormBuilder, private service: ContactService) {}
+
+  public ngOnInit() {
+    this.subscription = this.service
+      .loadContact()
+      .subscribe((data: Contact) => {
+        this.contact = data;
+        this.form = this.createForm();
+      });
+  }
+
+  public ngOnDestroy() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  private createForm(): FormGroup {
+    const name = this.contact.name;
+
+    const addresses: FormArray = this.fb.array([]);
+
+    const group = this.fb.group({
       nameGroup: this.fb.group({
-        firstName: [], // new FormControl(this.name ? this.name.firstName : ''),
+        firstName: [name ? name.firstName : ''],
-        lastName: [], // new FormControl(this.name ? this.name.lastName : ''),
+        lastName: [name ? name.lastName : ''],
-        middleName: [], // new FormControl(this.name ? this.name.middleName : ''),
+        middleName: [name ? name.middleName : ''],
-        prefix: [], // new FormControl(this.name ? this.name.prefix : ''),
+        prefix: [name ? name.prefix : ''],
-        suffix: [], // new FormControl(this.name ? this.name.suffix : ''),
+        suffix: [name ? name.suffix : '']
-      })
+      }),
+      addresses: addresses
     });
+
+    if (this.contact.addresses) {
+      this.contact.addresses.forEach(addr => {
+        addresses.push(
+          this.fb.group({
+            line1: [addr ? addr.line_1 : ''],
+            line2: [addr ? addr.line_2 : ''],
+            city: [addr ? addr.city : ''],
+            state: [addr ? addr.state : ''],
+            postalCode: [addr ? addr.postalCode : '']
+          })
+        );
+      });
+    }
+
+    return group;
   }
 }

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

@@ -5,13 +5,15 @@ import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NameComponent } from './name/name.component';
+import { ContactModule } from '@nested-forms/contact';
 
 @NgModule({
   declarations: [AppComponent, NameComponent],
   imports: [
     BrowserModule,
     RouterModule.forRoot([], { initialNavigation: 'enabled' }),
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    ContactModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]