.prettierrc

@@ -1,4 +1,3 @@
 {
-  "singleQuote": true,
-  "trailingComma": "all"
+  "singleQuote": true
 }

angular.json

@@ -1,9 +1,9 @@
 {
   "version": 1,
   "projects": {
-    "contact": {
-      "root": "libs/contact",
-      "sourceRoot": "libs/contact/src",
+    "contact-model": {
+      "root": "libs/contact-model",
+      "sourceRoot": "libs/contact-model/src",
       "projectType": "library",
       "schematics": {},
       "architect": {
@@ -11,18 +11,18 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "libs/contact/tsconfig.lib.json",
-              "libs/contact/tsconfig.spec.json"
+              "libs/contact-model/tsconfig.lib.json",
+              "libs/contact-model/tsconfig.spec.json"
             ],
-            "exclude": ["**/node_modules/**", "!libs/contact/**"]
+            "exclude": ["**/node_modules/**", "!libs/contact-model/**"]
           }
         },
         "test": {
           "builder": "@nrwl/jest:jest",
           "options": {
-            "jestConfig": "libs/contact/jest.config.js",
-            "tsConfig": "libs/contact/tsconfig.spec.json",
-            "setupFile": "libs/contact/src/test-setup.ts"
+            "jestConfig": "libs/contact-model/jest.config.js",
+            "tsConfig": "libs/contact-model/tsconfig.spec.json",
+            "setupFile": "libs/contact-model/src/test-setup.ts"
           }
         }
       }

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

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

apps/global-form/src/app/address-list/address-list.component.spec.ts

@@ -1,28 +0,0 @@
-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();
-  });
-});

apps/global-form/src/app/address-list/address-list.component.ts

@@ -1,17 +0,0 @@
-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() {
-  }
-
-}

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

@@ -1,27 +0,0 @@
-<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>
-  

apps/global-form/src/app/address/address.component.spec.ts

@@ -1,27 +0,0 @@
-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();
-  });
-});

apps/global-form/src/app/address/address.component.ts

@@ -1,17 +0,0 @@
-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() {
-  }
-
-}

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

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

apps/global-form/src/app/app.component.spec.ts

@@ -3,21 +3,12 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.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 { ContactFormService } from './services/contact-form.service';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        ReactiveFormsModule,
-        ContactModule.forRoot()
-      ],
-      declarations: [AppComponent, NameComponent, AddressComponent, AddressListComponent],
-      providers: [ ContactFormService ],
+      imports: [RouterTestingModule, ReactiveFormsModule],
+      declarations: [AppComponent, NameComponent]
     }).compileComponents();
   }));
 
@@ -26,4 +17,5 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
+
 });

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

@@ -1,37 +1,23 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { Contact, ContactService } from '@nested-forms/contact';
-import { Subscription } from 'rxjs';
-import { ContactFormService } from './services/contact-form.service';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nested-forms-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit, OnDestroy {
-  contact: Contact;
+export class AppComponent {
   form: FormGroup;
 
-  private subscription: Subscription;
-
-  constructor(
-    private service: ContactService,
-    private formService: ContactFormService,
-  ) {}
-
-  public ngOnInit() {
-    this.subscription = this.service
-      .loadContact()
-      .subscribe((data: Contact) => {
-        this.contact = data;
-        this.form = this.formService.createForm(data);
-      });
-  }
-
-  public ngOnDestroy() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
+  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

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

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

@@ -1,27 +1 @@
-<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>
-  
+<p>name works!</p>

apps/global-form/src/app/name/name.component.spec.ts

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

apps/global-form/src/app/services/contact-form.service.spec.ts

@@ -1,15 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { ContactFormService } from './contact-form.service';
-
-describe('ContactFormService', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [ReactiveFormsModule],
-  }));
-
-  it('should be created', () => {
-    const service: ContactFormService = TestBed.get(ContactFormService);
-    expect(service).toBeTruthy();
-  });
-});

apps/global-form/src/app/services/contact-form.service.ts

@@ -1,43 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
-import { Contact } from '@nested-forms/contact';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ContactFormService {
-  constructor(private fb: FormBuilder) {}
-
-  public createForm(model: Contact): FormGroup {
-    const name = model.name;
-
-    const addresses: FormArray = this.fb.array([]);
-
-    const group = this.fb.group({
-      nameGroup: this.fb.group({
-        firstName: [name ? name.firstName : ''],
-        lastName: [name ? name.lastName : ''],
-        middleName: [name ? name.middleName : ''],
-        prefix: [name ? name.prefix : ''],
-        suffix: [name ? name.suffix : ''],
-      }),
-      addresses: addresses,
-    });
-
-    if (model.addresses) {
-      model.addresses.forEach(addr => {
-        addresses.push(
-          this.fb.group({
-            line1: [addr ? addr.line_1 : ''],
-            line2: [addr ? addr.line_2 : ''],
-            city: [addr ? addr.city : ''],
-            state: [addr ? addr.state : ''],
-            postalCode: [addr ? addr.postalCode : ''],
-          }),
-        );
-      });
-    }
-
-    return group;
-  }
-}

apps/parent-form/src/app/address-list/address-list.component.ts

@@ -1,5 +1,5 @@
 import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
-import { Address } from '@nested-forms/contact';
+import { Address } from '@nested-forms/contact-model';
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({

apps/parent-form/src/app/address/address.component.ts

@@ -1,5 +1,5 @@
 import { FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms';
-import { Address } from '@nested-forms/contact';
+import { Address } from '@nested-forms/contact-model';
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({

apps/parent-form/src/app/app.component.spec.ts

@@ -5,12 +5,11 @@ import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NameComponent } from './name/name.component';
-import { ContactModule } from '@nested-forms/contact';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, ReactiveFormsModule, ContactModule.forRoot()],
+      imports: [RouterTestingModule, ReactiveFormsModule],
       declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent]
     }).compileComponents();
   }));

apps/parent-form/src/app/app.component.ts

@@ -1,4 +1,5 @@
-import { Contact, ContactService } from '@nested-forms/contact';
+import { ContactService } from './../../../../libs/contact-model/src/lib/contact.service';
+import { Contact } from '@nested-forms/contact-model';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { Subscription } from 'rxjs';

apps/parent-form/src/app/app.module.ts

@@ -7,7 +7,6 @@ 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';
-import { ContactModule } from '@nested-forms/contact';
 
 @NgModule({
   declarations: [AppComponent, NameComponent, AddressListComponent, AddressComponent],
@@ -15,7 +14,6 @@ import { ContactModule } from '@nested-forms/contact';
     BrowserModule,
     RouterModule.forRoot([], { initialNavigation: 'enabled' }),
     ReactiveFormsModule,
-    ContactModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

apps/parent-form/src/app/name/name.component.ts

@@ -1,5 +1,5 @@
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
-import { Name } from '@nested-forms/contact';
+import { Name } from '@nested-forms/contact-model';
 import { Component, OnInit, Input } from '@angular/core';
 
 @Component({

jest.config.js

@@ -107,8 +107,7 @@ module.exports = {
 
   // A path to a custom resolver
   // resolver: null,
-  resolver: '@nrwl/jest/plugins/resolver',
-  
+
   // Automatically restore mock state between every test
   // restoreMocks: false,
 

libs/contact-model/README.md

@@ -0,0 +1,7 @@
+# contact-model
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `ng test contact-model` to execute the unit tests via [Jest](https://jestjs.io).

libs/contact-model/jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  name: 'contact',
+  name: 'contact-model',
   preset: '../../jest.config.js',
   transform: {
     '^.+\\.[tj]sx?$': 'ts-jest'
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
-  coverageDirectory: '../../coverage/libs/contact',
+  coverageDirectory: '../../coverage/libs/contact-model',
 };

libs/contact-model/src/index.ts

@@ -1,3 +1,2 @@
 export * from './lib/contact-model';
 export * from './lib/contact.service';
-export * from './lib/contact.module';

libs/contact-model/src/lib/contact.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Contact } from './contact-model';
+import { Contact } from '@nested-forms/contact-model';
 import { Observable, of } from 'rxjs';
 
 const contact: Contact = {
@@ -27,7 +27,9 @@ const contact: Contact = {
   ],
 };
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ContactService {
   constructor() { }
 

libs/contact/README.md

@@ -1,7 +0,0 @@
-# contact
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `ng test contact` to execute the unit tests via [Jest](https://jestjs.io).

libs/contact/src/lib/contact.module.ts

@@ -1,28 +0,0 @@
-import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ContactService } from './contact.service';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule
-  ]
-})
-export class ContactModule { 
-  constructor(
-    @Optional()
-    @SkipSelf()
-    parentModule: ContactModule
-  ) {
-    if (parentModule) {
-      throw new Error('ContactModule is already loaded. Import it in the AppModule only');
-    }
-  }
-
-  static forRoot() {
-    return {
-      ngModule: ContactModule,
-      providers: [ ContactService ]
-    }
-  }
-}

nx.json

@@ -8,7 +8,7 @@
     "nx.json": "*"
   },
   "projects": {
-    "contact": {
+    "contact-model": {
       "tags": []
     },
     "parent-form-e2e": {

tsconfig.json

@@ -16,7 +16,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@nested-forms/contact": ["libs/contact/src/index.ts"]
+      "@nested-forms/contact-model": ["libs/contact-model/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]