Refactor form building logic into its own service

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

@@ -6,6 +6,7 @@ import { NameComponent } from './name/name.component';
 import { AddressListComponent } from './address-list/address-list.component';
 import { AddressComponent } from './address/address.component';
 import { ContactModule } from '@nested-forms/contact';
+import { ContactFormService } from './services/contact-form.service';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -15,7 +16,8 @@ describe('AppComponent', () => {
         ReactiveFormsModule,
         ContactModule.forRoot()
       ],
-      declarations: [AppComponent, NameComponent, AddressComponent, AddressListComponent]
+      declarations: [AppComponent, NameComponent, AddressComponent, AddressListComponent],
+      providers: [ ContactFormService ],
     }).compileComponents();
   }));
 

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

@@ -1,12 +1,13 @@
-import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
+import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { Contact, ContactService } from '@nested-forms/contact';
 import { Subscription } from 'rxjs';
+import { ContactFormService } from './services/contact-form.service';
 
 @Component({
   selector: 'nested-forms-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit, OnDestroy {
   contact: Contact;
@@ -14,14 +15,17 @@ export class AppComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription;
 
-  constructor(private fb: FormBuilder, private service: ContactService) {}
+  constructor(
+    private service: ContactService,
+    private formService: ContactFormService,
+  ) {}
 
   public ngOnInit() {
     this.subscription = this.service
       .loadContact()
       .subscribe((data: Contact) => {
         this.contact = data;
-        this.form = this.createForm();
+        this.form = this.formService.createForm(data);
       });
   }
 
@@ -30,37 +34,4 @@ export class AppComponent implements OnInit, OnDestroy {
       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: [name ? name.firstName : ''],
-        lastName: [name ? name.lastName : ''],
-        middleName: [name ? name.middleName : ''],
-        prefix: [name ? name.prefix : ''],
-        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/services/contact-form.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { ContactFormService } from './contact-form.service';
+
+describe('ContactFormService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [ReactiveFormsModule],
+  }));
+
+  it('should be created', () => {
+    const service: ContactFormService = TestBed.get(ContactFormService);
+    expect(service).toBeTruthy();
+  });
+});

apps/global-form/src/app/services/contact-form.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { Contact } from '@nested-forms/contact';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactFormService {
+  constructor(private fb: FormBuilder) {}
+
+  public createForm(model: Contact): FormGroup {
+    const name = model.name;
+
+    const addresses: FormArray = this.fb.array([]);
+
+    const group = this.fb.group({
+      nameGroup: this.fb.group({
+        firstName: [name ? name.firstName : ''],
+        lastName: [name ? name.lastName : ''],
+        middleName: [name ? name.middleName : ''],
+        prefix: [name ? name.prefix : ''],
+        suffix: [name ? name.suffix : ''],
+      }),
+      addresses: addresses,
+    });
+
+    if (model.addresses) {
+      model.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;
+  }
+}