Generate name component as reactive form

Kevin C. Coram 2019-08-27 23:18:49 -04:00
parent b90fcf4bbe
commit 5f90338ae3
5 changed files with 90 additions and 2 deletions

View File

@ -3,12 +3,15 @@ import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { NameComponent } from './name/name.component';
@NgModule({
declarations: [AppComponent],
declarations: [AppComponent, NameComponent],
imports: [
BrowserModule,
RouterModule.forRoot([], { initialNavigation: 'enabled' })
RouterModule.forRoot([], { initialNavigation: 'enabled' }),
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]

View File

@ -0,0 +1,26 @@
<form [formGroup]="group">
<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

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

View File

@ -0,0 +1,34 @@
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { Name } from '@nested-forms/contact-model';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'nested-forms-name',
templateUrl: './name.component.html',
styleUrls: ['./name.component.css']
})
export class NameComponent implements OnInit {
@Input() name: Name;
@Input() parent: FormGroup;
group: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.group = this.fb.group({
firstName: new FormControl(this.name ? this.name.firstName : ''),
lastName: new FormControl(this.name ? this.name.lastName : ''),
middleName: new FormControl(this.name ? this.name.middleName : ''),
prefix: new FormControl(this.name ? this.name.prefix : ''),
suffix: new FormControl(this.name ? this.name.suffix : ''),
});
if (this.parent) {
this.parent.addControl('name', this.group);
}
}
}