Adding AsyncValidator test

src/app/_mock/testfields.v7.ts

@@ -0,0 +1,41 @@
+// TESTS: Async Validator
+
+import { FormControl, Validators, ValidationErrors } from '@angular/forms';
+
+// For the simple async validator
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/delay';
+import 'rxjs/add/operator/map';
+
+const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
+	return Observable.of(fc).delay(2000).map(fc => {
+		console.log('Async validator got', fc.value);
+		return { is42: fc.value === '42' };
+	});
+}
+
+const model = {
+	nonValidatedField: '',
+	dynaformtest: {
+		validatedField: ''
+	}
+};
+
+const meta = {
+	dynaformtest: {
+		meta: {
+			validatedField: {
+				label: 'What\'s 30 + 12 ?',
+				validators: Validators.required,
+				asyncValidators: testAsyncValidator,
+				valFailureMessages: {
+					'required': 'This field is required',
+					'is42': 'The only correct answer is 42'
+				}
+			}
+		}
+	}
+};
+
+export { model, meta };

src/app/app.component.html

@@ -4,18 +4,22 @@
 			<h1>NgDynaform</h1>
 			<p>
 			Dynamic Form Layout Module<br>
-			<b>NOTE: Model set to update on change, but can be set to blur or submit for greater efficiency.</b>
+			Load different tests by appendiing a query param <b>?test=N</b> (where N is a number between 1 and 7).<br>
+			NOTE: Model set to update on change, but this can be set to blur or submit for less re-rendering.
 			</p>
 		</div>
 	</div>
+	<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" debug="1"></app-dynaform>
+	<!-- Uncomment to test access to deeply-nested FormGroups using formGroupName -->
+	<!--
 	<form [formGroup]="form">
-		<!-- <span formGroupName="dynaformtest">
-			<span formGroupName="d"> -->
-				<app-dynaform [formGroup]="form" [meta]="meta" [template]="tref" debug="1"></app-dynaform>
-				<!-- <app-dynaform formGroupName="g" [meta]="meta" [template]="tref"></app-dynaform> -->
-			<!-- </span>
-		</span> -->
+		<span formGroupName="dynaformtest">
+			<span formGroupName="d">
+				<app-dynaform formGroupName="g" [meta]="meta" [template]="tref"></app-dynaform>
+			</span>
+		</span>
 	</form>
+	-->
 	<div calss="row">
 		<div class="col-12 pt-4 pb-4">
 			<json-formatter [data]="form.value" open="4"></json-formatter>

src/app/app.component.ts

@@ -8,8 +8,9 @@ import * as test3 from './_mock/testfields.v3';
 import * as test4 from './_mock/testfields.v4';
 import * as test5 from './_mock/testfields.v5';
 import * as test6 from './_mock/testfields.v6';
+import * as test7 from './_mock/testfields.v7';
 
-const testdata = [ test1, test2, test3, test4, test5, test6 ];
+const testdata = [ test1, test2, test3, test4, test5, test6, test7 ];
 
 @Component({
 	selector: 'app-root',

src/app/dynaform/dynaform.component.html

@@ -26,7 +26,8 @@
 </ng-template>
 
 
-<pre *ngIf="debug && path.length === 0"
+<!-- Display validation unfo if debugging and not nested -->
+ <pre *ngIf="debug && path.length === 0"
 	[ngClass]="{
 		'alert-success' 	: formGroup.valid && formGroup.dirty,
 		'alert-danger' 		: !formGroup.valid && formGroup.dirty,

src/app/dynaform/services/dynaform.service.ts

@@ -24,7 +24,7 @@
  * build(model)				- build everything from the model
  * build({}, meta)			- build everything from the metadata
  * build(model, meta)		- build by combining the model with metadata, lazyily (not every model field needs metadata, as sensible defaults)
- * build(model, meta, true)	- build by combining model with metadata, creating new fields from metadata points not in the model
+ * build(model, meta, true)	- build by combining model with metadata, creating new fields from metadata points that don't occur in the model
  *
  *
  * LOWER-LEVEL METHODS