Remove FormBuilder dependency; rname factory methods

* Update factory methods to use the FormGroup(), FormArray(), and
  FormControl() constructors instead of the FormBuilder service.
  This avoids needing to pass the service into each of the static
  factory methods.
* Rename the factory methods to `buildForm`. The consistent use
  of the same name establishes a pattern and makes it clearer
  that the factory methods have the same purpose -- to create the
  (sub)form for the specific component.
master
Kevin C. Coram 2020-01-07 22:39:53 -05:00
parent cb8144044e
commit b7870b607b
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
4 changed files with 23 additions and 23 deletions

View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder } from '@angular/forms'; import { FormArray } from '@angular/forms';
import { Address } from '@nested-forms/contact'; import { Address } from '@nested-forms/contact';
import { AddressComponent } from '../address/address.component'; import { AddressComponent } from '../address/address.component';
@ -11,12 +11,12 @@ import { AddressComponent } from '../address/address.component';
export class AddressListComponent implements OnInit { export class AddressListComponent implements OnInit {
@Input() addressArray: FormArray; @Input() addressArray: FormArray;
static createContactAddressListForm(addresses: Address[], fb: FormBuilder): FormArray { static buildForm(addresses: Address[]): FormArray {
const list: FormArray = fb.array([]); const list: FormArray = new FormArray([]);
if (addresses) { if (addresses) {
addresses.forEach(addr => { addresses.forEach(addr => {
list.push(AddressComponent.createContactAddressForm(addr, fb)); list.push(AddressComponent.buildForm(addr));
}); });
} }

View File

@ -1,5 +1,5 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormGroup, FormControl } from '@angular/forms';
import { Address } from '@nested-forms/contact'; import { Address } from '@nested-forms/contact';
@Component({ @Component({
@ -10,13 +10,13 @@ import { Address } from '@nested-forms/contact';
export class AddressComponent implements OnInit { export class AddressComponent implements OnInit {
@Input() addressGroup: FormGroup; @Input() addressGroup: FormGroup;
static createContactAddressForm(addr: Address, fb: FormBuilder): FormGroup { static buildForm(addr: Address): FormGroup {
return fb.group({ return new FormGroup({
line1: [addr ? addr.line1 : ''], line1: new FormControl(addr ? addr.line1 : ''),
line2: [addr ? addr.line2 : ''], line2: new FormControl(addr ? addr.line2 : ''),
city: [addr ? addr.city : ''], city: new FormControl(addr ? addr.city : ''),
state: [addr ? addr.state : ''], state: new FormControl(addr ? addr.state : ''),
postalCode: [addr ? addr.postalCode : ''], postalCode: new FormControl(addr ? addr.postalCode : ''),
}); });
} }

View File

@ -30,8 +30,8 @@ export class AppComponent implements OnInit, OnDestroy {
.subscribe((data: Contact) => { .subscribe((data: Contact) => {
this.contact = data; this.contact = data;
this.form = this.fb.group({ this.form = this.fb.group({
name: NameComponent.createContactNameForm(data.name, this.fb), name: NameComponent.buildForm(data.name),
addresses: AddressListComponent.createContactAddressListForm(data.addresses, this.fb), addresses: AddressListComponent.buildForm(data.addresses),
}); });
}); });
} }

View File

@ -1,4 +1,4 @@
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { Name } from '@nested-forms/contact'; import { Name } from '@nested-forms/contact';
@ -10,14 +10,14 @@ import { Name } from '@nested-forms/contact';
export class NameComponent implements OnInit { export class NameComponent implements OnInit {
@Input() nameGroup: FormGroup; @Input() nameGroup: FormGroup;
static createContactNameForm(name: Name, fb: FormBuilder): FormGroup { static buildForm(name: Name): FormGroup {
return fb.group({ return new FormGroup({
firstName: [name ? name.firstName : ''], firstName: new FormControl(name ? name.firstName : ''),
lastName: [name ? name.lastName : ''], lastName: new FormControl(name ? name.lastName : ''),
middleName: [name ? name.middleName : ''], middleName: new FormControl(name ? name.middleName : ''),
prefix: [name ? name.prefix : ''], prefix: new FormControl(name ? name.prefix : ''),
suffix: [name ? name.suffix : ''], suffix: new FormControl(name ? name.suffix : ''),
}) });
} }
constructor() {} constructor() {}