;
+
+ 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();
+ });
+});
diff --git a/apps/static-factory-methods/src/app/address/address.component.ts b/apps/static-factory-methods/src/app/address/address.component.ts
new file mode 100644
index 0000000..e2d58f5
--- /dev/null
+++ b/apps/static-factory-methods/src/app/address/address.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Address } from '@nested-forms/contact';
+
+@Component({
+ selector: 'nested-forms-address',
+ templateUrl: './address.component.html',
+ styleUrls: ['./address.component.css']
+})
+export class AddressComponent implements OnInit {
+ @Input() addressGroup: FormGroup;
+
+ static createContactAddressForm(addr: Address, fb: FormBuilder): FormGroup {
+ return fb.group({
+ line1: [addr ? addr.line1 : ''],
+ line2: [addr ? addr.line2 : ''],
+ city: [addr ? addr.city : ''],
+ state: [addr ? addr.state : ''],
+ postalCode: [addr ? addr.postalCode : ''],
+ });
+ }
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/apps/static-factory-methods/src/app/app.component.css b/apps/static-factory-methods/src/app/app.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/apps/static-factory-methods/src/app/app.component.html b/apps/static-factory-methods/src/app/app.component.html
new file mode 100644
index 0000000..d8c6a21
--- /dev/null
+++ b/apps/static-factory-methods/src/app/app.component.html
@@ -0,0 +1,8 @@
+
+
+
+ {{ form.value | json }}
+
diff --git a/apps/static-factory-methods/src/app/app.component.spec.ts b/apps/static-factory-methods/src/app/app.component.spec.ts
new file mode 100644
index 0000000..a59e4aa
--- /dev/null
+++ b/apps/static-factory-methods/src/app/app.component.spec.ts
@@ -0,0 +1,33 @@
+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';
+import { AddressListComponent } from './address-list/address-list.component';
+import { AddressComponent } from './address/address.component';
+import { ContactModule } from '@nested-forms/contact';
+
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ RouterTestingModule,
+ ReactiveFormsModule,
+ ContactModule.forRoot(),
+ ],
+ declarations: [
+ AppComponent,
+ NameComponent,
+ AddressComponent,
+ AddressListComponent,
+ ],
+ providers: [],
+ }).compileComponents();
+ }));
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ });
+});
diff --git a/apps/static-factory-methods/src/app/app.component.ts b/apps/static-factory-methods/src/app/app.component.ts
new file mode 100644
index 0000000..2beff5d
--- /dev/null
+++ b/apps/static-factory-methods/src/app/app.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import {
+ Contact,
+ ContactService,
+} from '@nested-forms/contact';
+import { Subscription } from 'rxjs';
+import { NameComponent } from './name/name.component';
+import { AddressListComponent } from './address-list/address-list.component';
+
+@Component({
+ selector: 'nested-forms-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css'],
+})
+export class AppComponent implements OnInit, OnDestroy {
+ contact: Contact;
+ form: FormGroup;
+
+ private subscription: Subscription;
+
+ constructor(
+ private service: ContactService,
+ private fb: FormBuilder,
+ ) {}
+
+ public ngOnInit() {
+ this.subscription = this.service
+ .loadContact()
+ .subscribe((data: Contact) => {
+ this.contact = data;
+ this.form = this.fb.group({
+ name: NameComponent.createContactNameForm(data.name, this.fb),
+ addresses: AddressListComponent.createContactAddressListForm(data.addresses, this.fb),
+ });
+ });
+ }
+
+ public ngOnDestroy() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
+}
diff --git a/apps/static-factory-methods/src/app/app.module.ts b/apps/static-factory-methods/src/app/app.module.ts
new file mode 100644
index 0000000..45b56b2
--- /dev/null
+++ b/apps/static-factory-methods/src/app/app.module.ts
@@ -0,0 +1,23 @@
+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';
+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],
+ imports: [
+ BrowserModule,
+ RouterModule.forRoot([], { initialNavigation: 'enabled' }),
+ ReactiveFormsModule,
+ ContactModule.forRoot()
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule {}
diff --git a/apps/static-factory-methods/src/app/name/name.component.css b/apps/static-factory-methods/src/app/name/name.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/apps/static-factory-methods/src/app/name/name.component.html b/apps/static-factory-methods/src/app/name/name.component.html
new file mode 100644
index 0000000..f688e17
--- /dev/null
+++ b/apps/static-factory-methods/src/app/name/name.component.html
@@ -0,0 +1,27 @@
+
+
\ No newline at end of file
diff --git a/apps/static-factory-methods/src/app/name/name.component.spec.ts b/apps/static-factory-methods/src/app/name/name.component.spec.ts
new file mode 100644
index 0000000..6f115d7
--- /dev/null
+++ b/apps/static-factory-methods/src/app/name/name.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { NameComponent } from './name.component';
+
+describe('NameComponent', () => {
+ let component: NameComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [ReactiveFormsModule],
+ declarations: [NameComponent]
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NameComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/apps/static-factory-methods/src/app/name/name.component.ts b/apps/static-factory-methods/src/app/name/name.component.ts
new file mode 100644
index 0000000..2241985
--- /dev/null
+++ b/apps/static-factory-methods/src/app/name/name.component.ts
@@ -0,0 +1,26 @@
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Component, OnInit, Input } from '@angular/core';
+import { Name } from '@nested-forms/contact';
+
+@Component({
+ selector: 'nested-forms-name',
+ templateUrl: './name.component.html',
+ styleUrls: ['./name.component.css']
+})
+export class NameComponent implements OnInit {
+ @Input() nameGroup: FormGroup;
+
+ static createContactNameForm(name: Name, fb: FormBuilder): FormGroup {
+ return fb.group({
+ firstName: [name ? name.firstName : ''],
+ lastName: [name ? name.lastName : ''],
+ middleName: [name ? name.middleName : ''],
+ prefix: [name ? name.prefix : ''],
+ suffix: [name ? name.suffix : ''],
+ })
+ }
+
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/apps/static-factory-methods/src/assets/.gitkeep b/apps/static-factory-methods/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/static-factory-methods/src/environments/environment.prod.ts b/apps/static-factory-methods/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3612073
--- /dev/null
+++ b/apps/static-factory-methods/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/apps/static-factory-methods/src/environments/environment.ts b/apps/static-factory-methods/src/environments/environment.ts
new file mode 100644
index 0000000..7b4f817
--- /dev/null
+++ b/apps/static-factory-methods/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/apps/static-factory-methods/src/favicon.ico b/apps/static-factory-methods/src/favicon.ico
new file mode 100644
index 0000000..8081c7c
Binary files /dev/null and b/apps/static-factory-methods/src/favicon.ico differ
diff --git a/apps/static-factory-methods/src/index.html b/apps/static-factory-methods/src/index.html
new file mode 100644
index 0000000..6d86d80
--- /dev/null
+++ b/apps/static-factory-methods/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ GlobalForm
+
+
+
+
+
+
+
+
+
diff --git a/apps/static-factory-methods/src/main.ts b/apps/static-factory-methods/src/main.ts
new file mode 100644
index 0000000..fa4e0ae
--- /dev/null
+++ b/apps/static-factory-methods/src/main.ts
@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch(err => console.error(err));
diff --git a/apps/static-factory-methods/src/polyfills.ts b/apps/static-factory-methods/src/polyfills.ts
new file mode 100644
index 0000000..2f258e5
--- /dev/null
+++ b/apps/static-factory-methods/src/polyfills.ts
@@ -0,0 +1,62 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ * (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/apps/static-factory-methods/src/styles.css b/apps/static-factory-methods/src/styles.css
new file mode 100644
index 0000000..90d4ee0
--- /dev/null
+++ b/apps/static-factory-methods/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/static-factory-methods/src/test-setup.ts b/apps/static-factory-methods/src/test-setup.ts
new file mode 100644
index 0000000..8d88704
--- /dev/null
+++ b/apps/static-factory-methods/src/test-setup.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular';
diff --git a/apps/static-factory-methods/tsconfig.app.json b/apps/static-factory-methods/tsconfig.app.json
new file mode 100644
index 0000000..827b630
--- /dev/null
+++ b/apps/static-factory-methods/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": []
+ },
+ "include": ["**/*.ts"],
+ "exclude": ["src/test-setup.ts", "**/*.spec.ts"]
+}
diff --git a/apps/static-factory-methods/tsconfig.json b/apps/static-factory-methods/tsconfig.json
new file mode 100644
index 0000000..e5decd5
--- /dev/null
+++ b/apps/static-factory-methods/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "types": ["node", "jest"]
+ },
+ "include": ["**/*.ts"]
+}
diff --git a/apps/static-factory-methods/tsconfig.spec.json b/apps/static-factory-methods/tsconfig.spec.json
new file mode 100644
index 0000000..cfff29a
--- /dev/null
+++ b/apps/static-factory-methods/tsconfig.spec.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "module": "commonjs",
+ "types": ["jest", "node"]
+ },
+ "files": ["src/test-setup.ts"],
+ "include": ["**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/apps/static-factory-methods/tslint.json b/apps/static-factory-methods/tslint.json
new file mode 100644
index 0000000..b179968
--- /dev/null
+++ b/apps/static-factory-methods/tslint.json
@@ -0,0 +1,7 @@
+{
+ "extends": "../../tslint.json",
+ "rules": {
+ "directive-selector": [true, "attribute", "nestedForms", "camelCase"],
+ "component-selector": [true, "element", "nested-forms", "kebab-case"]
+ }
+}
diff --git a/nx.json b/nx.json
index 0da6034..c73aee4 100644
--- a/nx.json
+++ b/nx.json
@@ -19,6 +19,9 @@
},
"baseline": {
"tags": []
+ },
+ "static-factory-methods": {
+ "tags": []
}
}
}