Add name component to application

apps/global-form/src/app/app.component.html

@@ -1,27 +1,7 @@
-<div style="text-align:center">
-  <h1>Welcome to {{ title }}!</h1>
-  <img
-    width="450"
-    src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png"
-  />
-</div>
-
-<p>
-  This is an Angular app built with <a href="https://nx.dev/angular">Nx</a>.
-</p>
-<p>🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**</p>
-
-<h2>Quick Start & Documentation</h2>
-
-<ul>
-  <li>
-    <a href="https://nx.dev/angular/getting-started/what-is-nx"
-      >10-minute video showing all Nx features</a
-    >
-  </li>
-  <li>
-    <a href="https://nx.dev/angular/tutorial/01-create-application"
-      >Interactive tutorial</a
-    >
-  </li>
-</ul>
+<form [formGroup]="form">
+  <nested-forms-name [nameGroup]="form.get('nameGroup')"></nested-forms-name>
+</form>
+<hr />
+<pre>
+  {{ form.value | json }}
+</pre>

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!'
-    );
-  });
 });

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 : ''),
+      })
+    });
+  }
 }

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]
 })

apps/global-form/src/app/name/name.component.html

@@ -0,0 +1 @@
+<p>name works!</p>

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<NameComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NameComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {}
+}