Create and hook up form components

master
Kevin C. Coram 2019-09-04 23:02:49 -04:00
parent c5aa8b2f70
commit 21d0211853
Signed by: kevin
GPG Key ID: 0342351B3D61AD35
13 changed files with 155 additions and 3 deletions

View File

@ -0,0 +1,3 @@
<ng-container *ngFor="let addr of addressArray?.controls">
<nested-forms-address [addressGroup]="addr"></nested-forms-address>
</ng-container>

View File

@ -0,0 +1,28 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { AddressComponent } from './../address/address.component';
import { AddressListComponent } from './address-list.component';
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,17 @@
import { Component, OnInit, Input } from '@angular/core';
import { FormArray } from '@angular/forms';
@Component({
selector: 'nested-forms-address-list',
templateUrl: './address-list.component.html',
styleUrls: ['./address-list.component.css']
})
export class AddressListComponent implements OnInit {
@Input() addressArray: FormArray;
constructor() { }
ngOnInit() {
}
}

View File

@ -0,0 +1,27 @@
<form *ngIf="addressGroup" [formGroup]="addressGroup">
<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 { ReactiveFormsModule } from '@angular/forms';
import { AddressComponent } from './address.component';
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,17 @@
import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'nested-forms-address',
templateUrl: './address.component.html',
styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {
@Input() addressGroup: FormGroup;
constructor() { }
ngOnInit() {
}
}

View File

@ -1,5 +1,6 @@
<form [formGroup]="form"> <form [formGroup]="form">
<nested-forms-name [nameGroup]="form.get('nameGroup')"></nested-forms-name> <nested-forms-name [nameGroup]="form.get('nameGroup')"></nested-forms-name>
<nested-forms-address-list [addressArray]="form.get('addresses')"></nested-forms-address-list>
</form> </form>
<hr /> <hr />
<pre> <pre>

View File

@ -3,6 +3,8 @@ import { RouterTestingModule } from '@angular/router/testing';
import { TestBed, async } from '@angular/core/testing'; import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NameComponent } from './name/name.component'; 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 { ContactModule } from '@nested-forms/contact';
describe('AppComponent', () => { describe('AppComponent', () => {
@ -13,7 +15,7 @@ describe('AppComponent', () => {
ReactiveFormsModule, ReactiveFormsModule,
ContactModule.forRoot() ContactModule.forRoot()
], ],
declarations: [AppComponent, NameComponent] declarations: [AppComponent, NameComponent, AddressComponent, AddressListComponent]
}).compileComponents(); }).compileComponents();
})); }));

View File

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

View File

@ -1 +1,27 @@
<p>name works!</p> <form *ngIf="nameGroup" [formGroup]="nameGroup">
<div>
<label for="firstName">First Name: </label>
<input name="firstName" formControlName="firstName">
</div>
<div>
<label for="lastName">Last Name: </label>
<input name="lastName" formControlName="lastName">
</div>
<div>
<label for="middleName">Middle Name: </label>
<input name="middleName" formControlName="middleName">
</div>
<div>
<label for="prefix">Prefix: </label>
<input name="prefix" formControlName="prefix">
</div>
<div>
<label for="suffix">Suffix: </label>
<input name="suffix" formControlName="suffix">
</div>
</form>

View File

@ -1,4 +1,5 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { NameComponent } from './name.component'; import { NameComponent } from './name.component';
@ -8,6 +9,7 @@ describe('NameComponent', () => {
beforeEach(async(() => { beforeEach(async(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [NameComponent] declarations: [NameComponent]
}).compileComponents(); }).compileComponents();
})); }));