From bfda0985eb4c79f247246485f6ac110621c542bc Mon Sep 17 00:00:00 2001 From: "Kevin C. Coram" Date: Wed, 4 Sep 2019 23:47:09 -0400 Subject: [PATCH] Refactor form building logic into its own service --- .../global-form/src/app/app.component.spec.ts | 4 +- apps/global-form/src/app/app.component.ts | 47 ++++--------------- .../app/services/contact-form.service.spec.ts | 15 ++++++ .../src/app/services/contact-form.service.ts | 43 +++++++++++++++++ 4 files changed, 70 insertions(+), 39 deletions(-) create mode 100644 apps/global-form/src/app/services/contact-form.service.spec.ts create mode 100644 apps/global-form/src/app/services/contact-form.service.ts diff --git a/apps/global-form/src/app/app.component.spec.ts b/apps/global-form/src/app/app.component.spec.ts index 617b93f..8f9f339 100644 --- a/apps/global-form/src/app/app.component.spec.ts +++ b/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(); })); diff --git a/apps/global-form/src/app/app.component.ts b/apps/global-form/src/app/app.component.ts index 0777b7e..e618955 100644 --- a/apps/global-form/src/app/app.component.ts +++ b/apps/global-form/src/app/app.component.ts @@ -1,12 +1,13 @@ -import { FormGroup, FormBuilder, FormArray } from '@angular/forms'; -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit } 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; - } } diff --git a/apps/global-form/src/app/services/contact-form.service.spec.ts b/apps/global-form/src/app/services/contact-form.service.spec.ts new file mode 100644 index 0000000..5987086 --- /dev/null +++ b/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(); + }); +}); diff --git a/apps/global-form/src/app/services/contact-form.service.ts b/apps/global-form/src/app/services/contact-form.service.ts new file mode 100644 index 0000000..175160c --- /dev/null +++ b/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; + } +}