Testing synv and async validators with custom Form Controls

src/app/_mock/testfields.v9.ts

@@ -1,6 +1,21 @@
-// TESTS: Button callbacks in deeply nested forms
+// TESTS: Button callbacks in deeply nested forms, an validators on custom controls
+
+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(5000).map(fc => {
+		console.log('Async validator got', fc.value);
+		return { is4200: fc.value === '4200' };
+	});
+};
+
 
-import { Validators } from '@angular/forms';
 
 const model = {
 	// field: '',
@@ -31,7 +46,7 @@ const meta = {
 	},
 	dynaformtest: {
 		meta: {
-			valTest: {
+			validatorTest: {
 				validators: [ Validators.required, Validators.minLength(4) ],
 				// perhaps have some standard messages for standard failures in the Object.prototype ??
 				valFailureMessages: {
@@ -39,11 +54,15 @@ const meta = {
 					'minlength': 'Please type something longer'
 				}
 			},
-			b: { type: 'checkbutton' },
+			validatorsOnCustomControl: {
+				type: 'dropdownModifiedInput',
+				validators: [ Validators.required, Validators.minLength(4) ],
+				asyncValidators: testAsyncValidator
+			},
 			c: { label: 'Property Three', type: 'radio', options: ['Yes', 'No', 'Maybe'], horizontal: 1 },
 			d: {
 				meta: {
-					e: { type: 'radio', 'label': 'Does it work yet?', validators: Validators.required },
+					isWorking: { type: 'radio', 'label': 'Does it work yet?', validators: Validators.required },
 					f: { type: 'datepicker' },
 					deeplyNestedButtonGroup: { type: 'buttonGroup', label: 'Deeply Nested Buttons',
 						meta: [

src/app/dynaform/directives/dynafield.directive.ts

@@ -114,10 +114,11 @@ export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {
 				// so we need to wire it up!
 				this.name = name;
 				this.valueAccessor = <FFCCustom>this.component.instance;
-				/* Attaching Validators to Custom FormControls ... UNTESTED AS YET
+				// Attach sync validators
+				/*
 				const ngValidators = this.component.injector.get(NG_VALIDATORS, null);
-				console.log('ngValidators', ngValidators);
 				if (ngValidators && ngValidators.some(x => x as any === this.component.instance)) {
+					console.log('HERE');
 					this.validators = [...(this.validators || []), ...(ngValidators as Array<Validator|ValidatorFn>)];
 				}
 				*/
@@ -129,14 +130,14 @@ export class DynafieldDirective extends NgControl implements OnInit, OnDestroy {
 		}
 	}
 
-    ngOnDestroy(): void {
-        if (this.formGroupDirective) {
-            this.formGroupDirective.removeControl(this);
-        }
-        if (this.component) {
-            this.component.destroy();
-        }
-    }
+	ngOnDestroy(): void {
+		if (this.formGroupDirective) {
+			this.formGroupDirective.removeControl(this);
+		}
+		if (this.component) {
+			this.component.destroy();
+		}
+	}
 
 	get path(): string[] {
 		return [...this.cc.path, this.name];