Add address list components to form

Kevin C. Coram 2019-08-28 00:17:08 -04:00
parent 2637ff84ca
commit 5d676f568b
11 changed files with 155 additions and 4 deletions

View File

@ -0,0 +1,3 @@
<ng-container *ngFor="let addr of addresses">
<nested-forms-address [parent]="arrayGroup" [address]="addr"></nested-forms-address>
</ng-container>

View File

@ -0,0 +1,28 @@
import { AddressComponent } from './../address/address.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddressListComponent } from './address-list.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('AddressListComponent', () => {
let component: AddressListComponent;
let fixture: ComponentFixture<AddressListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [ AddressListComponent, AddressComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddressListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,26 @@
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { Address } from '@nested-forms/contact-model';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'nested-forms-address-list',
templateUrl: './address-list.component.html',
styleUrls: ['./address-list.component.css']
})
export class AddressListComponent implements OnInit {
@Input() addresses: Address[];
@Input() parent: FormGroup;
arrayGroup: FormArray;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.arrayGroup = this.fb.array([]);
if (this.parent) {
this.parent.addControl('addresses', this.arrayGroup);
}
}
}

View File

@ -0,0 +1,26 @@
<form [formGroup]="group">
<div>
<label for="line1">Line 1: </label>
<input name="line1" formControlName="line1">
</div>
<div>
<label for="line2">Line 2: </label>
<input name="line2" formControlName="line2">
</div>
<div>
<label for="city">City: </label>
<input name="city" formControlName="city">
</div>
<div>
<label for="state">State: </label>
<input name="state" formControlName="state">
</div>
<div>
<label for="postalCode">Postal Code: </label>
<input name="postalCode" formControlName="postalCode">
</div>
</form>

View File

@ -0,0 +1,27 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddressComponent } from './address.component';
import { ReactiveFormsModule } from '@angular/forms';
describe('AddressComponent', () => {
let component: AddressComponent;
let fixture: ComponentFixture<AddressComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [ AddressComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AddressComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,33 @@
import { FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { Address } from '@nested-forms/contact-model';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'nested-forms-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {
@Input() address: Address;
@Input() parent: FormArray;
group: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.group = this.fb.group({
line1: [this.address ? this.address.line_1 : ''],
line2: [this.address ? this.address.line_2 : ''],
city: [this.address ? this.address.city : ''],
state: [this.address ? this.address.state : ''],
postalCode : [this.address ? this.address.postalCode : ''],
});
if (this.parent) {
this.parent.push(this.group);
}
}
}

View File

@ -3,8 +3,12 @@
[name]="contact.name"
[parent]="form"
></nested-forms-name>
<nested-forms-address-list
[addresses]="contact.addresses"
[parent]="form"
></nested-forms-address-list>
</form>
<hr>
<div>
<pre>
{{ form.value | json }}
</div>
</pre>

View File

@ -1,3 +1,5 @@
import { AddressComponent } from './address/address.component';
import { AddressListComponent } from './address-list/address-list.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';
@ -8,7 +10,7 @@ describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule, ReactiveFormsModule],
declarations: [AppComponent, NameComponent]
declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent]
}).compileComponents();
}));

View File

@ -5,9 +5,11 @@ import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { NameComponent } from './name/name.component';
import { AddressListComponent } from './address-list/address-list.component';
import { AddressComponent } from './address/address.component';
@NgModule({
declarations: [AppComponent, NameComponent],
declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent],
imports: [
BrowserModule,
RouterModule.forRoot([], { initialNavigation: 'enabled' }),