diff --git a/apps/global-form/src/app/app.component.html b/apps/global-form/src/app/app.component.html index 803c853..e6c1f97 100644 --- a/apps/global-form/src/app/app.component.html +++ b/apps/global-form/src/app/app.component.html @@ -1,27 +1,7 @@ -
-

Welcome to {{ title }}!

- -
- -

- This is an Angular app built with Nx. -

-

🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**

- -

Quick Start & Documentation

- - +
+ +
+
+
+  {{ form.value | json }}
+
diff --git a/apps/global-form/src/app/app.component.spec.ts b/apps/global-form/src/app/app.component.spec.ts index 1d28edf..a04fd25 100644 --- a/apps/global-form/src/app/app.component.spec.ts +++ b/apps/global-form/src/app/app.component.spec.ts @@ -1,10 +1,14 @@ +import { ReactiveFormsModule } from '@angular/forms'; +import { RouterTestingModule } from '@angular/router/testing'; import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; +import { NameComponent } from './name/name.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [AppComponent] + imports: [RouterTestingModule, ReactiveFormsModule], + declarations: [AppComponent, NameComponent] }).compileComponents(); })); @@ -14,18 +18,4 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'global-form'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('global-form'); - }); - - it('should render title in a h1 tag', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain( - 'Welcome to global-form!' - ); - }); }); diff --git a/apps/global-form/src/app/app.component.ts b/apps/global-form/src/app/app.component.ts index 5363a14..24c4c3c 100644 --- a/apps/global-form/src/app/app.component.ts +++ b/apps/global-form/src/app/app.component.ts @@ -1,3 +1,4 @@ +import { FormGroup, FormBuilder } from '@angular/forms'; import { Component } from '@angular/core'; @Component({ @@ -6,5 +7,17 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'global-form'; + form: FormGroup; + + constructor(private fb: FormBuilder) { + this.form = this.fb.group({ + nameGroup: 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 : ''), + }) + }); + } } diff --git a/apps/global-form/src/app/app.module.ts b/apps/global-form/src/app/app.module.ts index 784cbd0..f748a5f 100644 --- a/apps/global-form/src/app/app.module.ts +++ b/apps/global-form/src/app/app.module.ts @@ -2,10 +2,17 @@ import { BrowserModule } from '@angular/platform-browser'; 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], - imports: [BrowserModule], + declarations: [AppComponent, NameComponent], + imports: [ + BrowserModule, + RouterModule.forRoot([], { initialNavigation: 'enabled' }), + ReactiveFormsModule + ], providers: [], bootstrap: [AppComponent] }) diff --git a/apps/global-form/src/app/name/name.component.css b/apps/global-form/src/app/name/name.component.css new file mode 100644 index 0000000..e69de29 diff --git a/apps/global-form/src/app/name/name.component.html b/apps/global-form/src/app/name/name.component.html new file mode 100644 index 0000000..53143da --- /dev/null +++ b/apps/global-form/src/app/name/name.component.html @@ -0,0 +1 @@ +

name works!

diff --git a/apps/global-form/src/app/name/name.component.spec.ts b/apps/global-form/src/app/name/name.component.spec.ts new file mode 100644 index 0000000..1346a7b --- /dev/null +++ b/apps/global-form/src/app/name/name.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NameComponent } from './name.component'; + +describe('NameComponent', () => { + let component: NameComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NameComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/global-form/src/app/name/name.component.ts b/apps/global-form/src/app/name/name.component.ts new file mode 100644 index 0000000..f05d3d9 --- /dev/null +++ b/apps/global-form/src/app/name/name.component.ts @@ -0,0 +1,14 @@ +import { FormGroup } from '@angular/forms'; +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() nameGroup: FormGroup; + constructor() {} + + ngOnInit() {} +}