Merging in latest changes from AMP - especially validation improvements

package.json

@@ -12,48 +12,49 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/animations": "^7.2.3",
-		"@angular/common": "^7.2.3",
-		"@angular/compiler": "^7.2.3",
-		"@angular/core": "^7.2.3",
-		"@angular/forms": "^7.2.3",
-		"@angular/http": "^7.2.3",
-		"@angular/platform-browser": "^7.2.3",
-		"@angular/platform-browser-dynamic": "^7.2.3",
-		"@angular/router": "^7.2.3",
-		"@clr/angular": "^1.0.5",
-		"@clr/icons": "^1.0.5",
-		"@clr/ui": "^1.0.5",
-		"@webcomponents/custom-elements": "^1.2.1",
+		"@angular/animations": "^7.2.15",
+		"@angular/common": "^7.2.15",
+		"@angular/compiler": "^7.2.15",
+		"@angular/core": "^7.2.15",
+		"@angular/forms": "^7.2.15",
+		"@angular/http": "^7.2.15",
+		"@angular/platform-browser": "^7.2.15",
+		"@angular/platform-browser-dynamic": "^7.2.15",
+		"@angular/router": "^7.2.15",
+		"@clr/angular": "^1.1.4",
+		"@clr/icons": "^1.1.4",
+		"@clr/ui": "^1.1.4",
+		"@webcomponents/custom-elements": "^1.2.4",
 		"angular-super-validator": "^2.0.0",
-		"core-js": "^2.6.3",
 		"json-formatter-js": "^2.2.1",
 		"lodash": "^4.17.11",
-		"rxjs": "^6.4.0",
-		"rxjs-compat": "^6.4.0",
+		"ramda": "^0.26.1",
+		"rxjs": "^6.5.2",
+		"rxjs-compat": "^6.5.2",
+		"typescript": "^3.2.4",
 		"zone.js": "^0.8.29"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "~0.13.0",
-		"@angular/cli": "~7.3.0",
-		"@angular/compiler-cli": "^7.2.3",
-		"@angular/language-service": "^7.2.3",
-		"@types/jasmine": "~3.3.8",
+		"@angular-devkit/build-angular": "^0.13.9",
+		"@angular/cli": "^7.3.9",
+		"@angular/compiler-cli": "^7.2.15",
+		"@angular/language-service": "^7.2.15",
+		"@types/jasmine": "^3.3.13",
 		"@types/jasminewd2": "~2.0.6",
-		"@types/lodash": "^4.14.120",
-		"@types/node": "~10.12.21",
+		"@types/lodash": "^4.14.134",
+		"@types/node": "^10.12.30",
 		"codelyzer": "^4.5.0",
 		"jasmine-core": "~3.3.0",
 		"jasmine-spec-reporter": "~4.2.1",
-		"karma": "~4.0.0",
+		"karma": "^4.0.1",
 		"karma-chrome-launcher": "~2.2.0",
-		"karma-coverage-istanbul-reporter": "^2.0.4",
+		"karma-coverage-istanbul-reporter": "^2.0.5",
 		"karma-jasmine": "~2.0.1",
-		"karma-jasmine-html-reporter": "^1.4.0",
+		"karma-jasmine-html-reporter": "^1.4.2",
+		"node-sass": "^4.12.0",
 		"protractor": "^5.4.2",
-		"rxjs-tslint": "^0.1.6",
-		"ts-node": "~8.0.2",
-		"tslint": "~5.12.1",
-		"typescript": "^3.2.4"
+		"rxjs-tslint": "^0.1.7",
+		"ts-node": "^8.0.3",
+		"tslint": "~5.12.1"
 	}
 }

src/app/_mock/testfields.v1.ts

@@ -123,9 +123,9 @@ const checkbuttonGroup = new fmd.CheckbuttonGroup({
 // ---------------------------------------------------------------------------------------------------------------------
 // Kendo
 
-const timepicker = new fmd.TimepickerField({
-	name: 'timepicker'
-});
+// const timepicker = new fmd.TimepickerField({
+// 	name: 'timepicker'
+// });
 
 const datepicker = new fmd.DatepickerField({
 	name: 'datepicker'

src/app/app.module.ts

@@ -9,6 +9,9 @@ import { DynaformModule } from './dynaform/dynaform.module';
 import { AppComponent } from './app.component';
 import { JsonFormatterDirective } from './directives/json-formatter.directive';
 
+import { FRIENDLY_VALIDATION_ERRORS, friendlyValidationErrors } from './dynaform/config/validation-messages.config'; // You may want to provide in a highher level module to override
+
+
 @NgModule({
 	imports: [
 		BrowserModule,
@@ -23,7 +26,10 @@ import { JsonFormatterDirective } from './directives/json-formatter.directive';
 		AppComponent,
 		JsonFormatterDirective
 	],
-	providers: [ { provide: LOCALE_ID, useValue: 'en-gb' } ],
+	providers: [
+		{ provide: LOCALE_ID, useValue: 'en-gb' },
+		[{ provide: FRIENDLY_VALIDATION_ERRORS, useValue: friendlyValidationErrors }]  // You may want to provide in a highher level module to override
+	],
 	bootstrap:  [AppComponent ]
 })
 export class AppModule { }

src/app/dynaform/components/_abstract/custom-input.component.ts

@@ -3,6 +3,7 @@ import { NativeInputComponent } from './native-input.component';
 
 export abstract class CustomInputComponent extends NativeInputComponent implements ControlValueAccessor {
 
+	
 	propagateChange = (_: any) => {};
 
 	writeValue(value: any): void {};

src/app/dynaform/components/_abstract/native-input.component.ts

@@ -41,9 +41,9 @@ export abstract class NativeInputComponent {
 		return this.componentName;
 	}
 
-	getFirstFailureMsg(): string | false {
+	getFirstFailureMsg(): string {
 		if (!this.control.errors) {
-			return false;
+			return '';
 		}
 		const key = Object.keys(this.control.errors)[0];
 		return this._meta.valFailureMsgs[key] || this.valErrsService.getFriendly(key, this.control.errors[key]);

src/app/dynaform/components/clarity/datepicker/datepicker.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
+
 
 @Component({
 	selector: 'app-datepicker',
@@ -15,6 +17,10 @@ export class ClrDatepickerComponent extends NativeInputComponent implements OnIn
 
 	readonly componentName = 'DatepickerComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(protected valErrsService: FriendlyValidationErrorsService) {
+		super(valErrsService);
+	}
+
 	ngOnInit() {
 		// Clarity datepicker expects a string when used reactively
 		const dateObj = this.control.value;

src/app/dynaform/components/clarity/display/clr-display.component.html

@@ -1,13 +1,13 @@
 <clr-input-container *ngIf="!link; else fieldWithLink">
 	<label>{{ label }}</label>
-	<input clrInput type="text" [formControl]="control" spellcheck="false" disabled>
+	<input clrInput type="text" [formControl]="control" spellcheck="false">
 </clr-input-container>
 
 
 <ng-template #fieldWithLink>
 	<clr-input-container>
 		<label>{{ label }}</label>
-		<input clrInput type="text" [formControl]="control" spellcheck="false" disabled>
+		<input clrInput type="text" [formControl]="control" spellcheck="false">
 		<div class="input-group-append">
 			<button class="btn btn-outline" type="button" [routerLink]="[ link.route, control.value ]">
 				{{ link.label || 'Details' }}

src/app/dynaform/components/clarity/textarea/clr-textarea.component.html

@@ -1,5 +1,9 @@
-<textarea clrTextarea
-	[formControl]="control"
-	[placeholder]="placeholder"
-	rows="5"
-></textarea>
+<clr-textarea-container>
+	<label [ngClass]="{ 'label-error': control.touched && control.invalid }">{{ label }}</label>
+	<textarea clrTextarea
+		[formControl]="control"
+		[placeholder]="placeholder"
+		rows="5"
+	></textarea>
+	<clr-control-error>{{ getFirstFailureMsg() }}</clr-control-error>
+</clr-textarea-container>

src/app/dynaform/components/clarity/textarea/clr-textarea.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { NativeInputComponent } from '../../_abstract/native-input.component';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
+
 
 @Component({
 	selector: 'app-textarea',
@@ -8,10 +10,15 @@ import { NativeInputComponent } from '../../_abstract/native-input.component';
 })
 export class ClrTextareaComponent extends NativeInputComponent {
 
-	exposeMetaInTemplate: string[] = ['placeholder'];
+	exposeMetaInTemplate: string[] = ['placeholder', 'label'];
 
 	placeholder: string;
+	label: string;
 
 	readonly componentName = 'TextareaComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(protected valErrsService: FriendlyValidationErrorsService) {
+		super(valErrsService);
+	}
+
 }

src/app/dynaform/components/custom/datetime/datetime.component.html

@@ -1,4 +1,4 @@
-<label>{{ label }}</label>
+<label [ngClass]="{ 'label-error': control.touched && control.invalid }">{{ label }}</label>
 <clr-date-container>
 	<input clrDate [ngModel]="date" (ngModelChange)="updateValue('date', $event)">
 </clr-date-container>
@@ -8,3 +8,5 @@
 <select clrSelect [ngModel]="mm" (ngModelChange)="updateValue('minutes', $event)">
 	<option *ngFor="let i of minuteOptions" [value]="i">{{ i }}</option>
 </select>
+<clr-control-error>{{ getFirstFailureMsg() }}</clr-control-error>
+

src/app/dynaform/components/custom/datetime/datetime.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
+
 
 @Component({
 	selector: 'amp-datetime',
@@ -25,13 +27,16 @@ export class DatetimeComponent extends CustomInputComponent implements OnInit {
 	date: string;
 	mm: string;
 	hh: string;
-	hourOptions: string[] = new Array(24).map((m, i) => `0${i}`.slice(-2));
-	minuteOptions: string[] = new Array(60).map((m, i) => `0${i}`.slice(-2));
+	hourOptions: string[] = new Array(24).fill(0).map((m, i) => `0${i}`.slice(-2));
+	minuteOptions: string[] = new Array(60).fill(0).map((m, i) => `0${i}`.slice(-2));
 
 	readonly componentName = 'DatetimeComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(protected valErrsService: FriendlyValidationErrorsService) {
+		super(valErrsService);
+	}
+
 	ngOnInit() {
-		console.log(this.control.value);
 		this.splitIntoDateAndTime(this.control.value);
 	}
 

src/app/dynaform/components/custom/dropdown-modified-input/dropdown-modified-input.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
 import { ValueTransformer }	from './../../../interfaces';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
+
 
 @Component({
 	selector: 'app-dropdown-modified-input',
@@ -32,6 +34,10 @@ export class DropdownModifiedInputComponent extends CustomInputComponent impleme
 
 	readonly componentName = 'DropdownModifiedInputComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(protected valErrsService: FriendlyValidationErrorsService) {
+		super(valErrsService);
+	}
+
 	ngOnInit() {
 		this.controlValue = this.control.value;
 	}

src/app/dynaform/components/custom/multiline/multiline.component.ts

@@ -1,6 +1,7 @@
 import { Component, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CustomInputComponent } from './../../_abstract/custom-input.component';
+import { FriendlyValidationErrorsService } from './../../../services/friendly-validation-errors.service';
 
 @Component({
 	selector: 'app-multiline',
@@ -24,6 +25,10 @@ export class MultilineComponent extends CustomInputComponent {
 
 	readonly componentName = 'MultilineComponent'; // For AOT compatibility, as class names don't survive minification
 
+	constructor(protected valErrsService: FriendlyValidationErrorsService) {
+		super(valErrsService);
+	}
+
 	writeValue(value: any): void {
 		this.value = value;
 		this.splitIntoLines(value, this._meta.lines || 5);

src/app/dynaform/config/validation-messages.config.ts

@@ -14,7 +14,8 @@ export const friendlyValidationErrors: FriendlyValErrors = {
 	'minlength': 'Enter a longer value, at least {{ requiredLength }} characters long',
 	'maxlength': 'Enter a shorter value, no more than {{ requiredLength }} characters long',
 	'email': 'Enter a valid email address',
-	'pattern': 'Invalid'
+	'pattern': 'Invalid',
+	'alreadyTaken': 'This Id is already taken'
 };
 
 

src/app/dynaform/dynaform.module.ts

@@ -12,6 +12,7 @@ import { DynafieldDirective } from './directives/dynafield.directive';
 import { DynaformService } from './services/dynaform.service';
 import { ModelMapperService } from './services/model-mapper.service';
 import { FriendlyValidationErrorsService } from './services/friendly-validation-errors.service';
+// import { FRIENDLY_VALIDATION_ERRORS, friendlyValidationErrors } from './config/validation-messages.config'; // You may want to provide in a highher level module to override
 
 import { ffcArr } from './components'; // ffcArr = Form Field Components Array, exported from components/index.ts
 
@@ -23,7 +24,7 @@ import { ffcArr } from './components'; // ffcArr = Form Field Components Array,
 		RouterModule.forChild([]),
 		// NgbModule,
 		// DateInputsModule
-		ClarityModule
+		ClarityModule,
 	],
 	declarations: [
 		DynaformComponent,

src/app/dynaform/index.ts

@@ -2,7 +2,7 @@ export { DynaformComponent } from './dynaform.component';
 // export { DynafieldDirective } from './directives/dynafield.directive';
 export { DynaformService } from './services/dynaform.service';
 export { ModelMapperService } from './services/model-mapper.service';
-export { standardModifiers, standardTransformer, toArrTag, arrayPad, arrayToMeta, excludeFields } from './utils';
-export { FRIENDLY_VALIDATION_ERRORS } from './config/validation-messages.config';
-export { FriendlyValErrors } from './interfaces';
+export { standardModifiers, standardTransformer, toArrTag, arrayPad, arrayToMeta, excludeFields, makeAsyncTest } from './utils';
+// export { FRIENDLY_VALIDATION_ERRORS } from './config/validation-messages.config';
+// export { FriendlyValErrors } from './interfaces';
 

src/app/dynaform/interfaces/index.ts

@@ -11,6 +11,7 @@ export interface FriendlyValErrors {
 	'maxlength': string;
 	'email': string;
 	'pattern': string;
+	'alreadyTaken': string;
 }
 
 export const a = 1;

src/app/dynaform/models/field.model.ts

@@ -83,11 +83,11 @@ abstract class SimpleField {
 	id?: string;
 	disabled = false;
 	change?: string;
-	validators: ValidatorFn[] = [];
-	asyncValidators: AsyncValidatorFn[] = [];
+	validators: ValidatorFn|ValidatorFn[] = [];
+	asyncValidators: AsyncValidatorFn|AsyncValidatorFn[] = [];
 	valFailureMsgs: StringMap<any> = {};
 
-	constructor(meta: ISimpleFieldMetaData) {
+	constructor(meta: ISimpleFieldMetaData, context?: any) {
 		Object.assign(this, meta);
 		if (!this.source) {
 			// If source is not supplied it's the same as the name
@@ -98,6 +98,19 @@ abstract class SimpleField {
 			// e.g. supervisorCardNumber --> Supervisor Card Number
 			this.label = unCamelCase(this.name);
 		}
+		// TODO: Consider binding context to standard validators as well as async validators
+		// BUT check this doesn't stop Angular's built-in validators from working (do they use 'this'?)
+		if (typeof this.asyncValidators === 'function' || Array.isArray(this.asyncValidators)) {
+			if (typeof this.asyncValidators === 'function') {
+				const boundFn = this.asyncValidators.bind(context);
+				this.asyncValidators = boundFn;
+			} else {
+				for (const i in this.asyncValidators) {
+					const boundFn = this.asyncValidators[i].bind(context);
+					this.asyncValidators[i] = boundFn;
+				}
+			}
+		}
 	}
 }
 
@@ -380,6 +393,7 @@ class Heading {
 class DisplayField extends SimpleField {
 	value: string;
 	link?: ILink;
+	readonly disabled = true;
 	constructor(meta) {
 		super(meta);
 	}

src/app/dynaform/services/_formdata-utils.ts

@@ -426,6 +426,26 @@ const getUpdateOn = (type: string): 'blur'|'change'|'submit' => {
 };
 
 
+// ---------------------------------------------------------------------------------------------------------------------
+// Send RESET message to any attached AsyncValidators
+// This resets the stored initail value on controls where the field is required
+// (otherwise it isn't reset when the form is reset, and retails its previous value)
+// ---------------------------------------------------------------------------------------------------------------------
+
+const resetAsyncValidatorsRecursive = (group: FormGroup | FormArray): void => {
+	for (const key in group.controls) {
+		if (group.controls[key] instanceof FormControl) {
+			const asv = group.controls[key].asyncValidator;
+			if (asv) {
+				Array.isArray(asv) ? asv.forEach(f => f('RESET')) : asv('RESET');
+			}
+		} else {
+			resetAsyncValidatorsRecursive(group.controls[key]);
+		}
+	}
+};
+
+
 // ---------------------------------------------------------------------------------------------------------------------
 // Touch and update the validity of all controls in a FormGroup or FormArray / Reset validity of all controls
 // useful for displaying validation failures on submit
@@ -694,6 +714,7 @@ export {
 	autoMeta, combineModelWithMeta, combineExtraMeta, execMetaReorderingInstructions,
 	buildFieldSpecificMetaInClosure, extractFieldMappings,
 	buildFormGroupFunctionFactory,
+	resetAsyncValidatorsRecursive,
 	touchAndUpdateValidityRecursive, resetValidityRecursive, advanceUpdateStategyOfInvalidControlsRecursive,
 	generateNewModel, updateMeta,
 };

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

@@ -106,6 +106,7 @@ import {
 	autoMeta, combineModelWithMeta, combineExtraMeta, execMetaReorderingInstructions,
 	buildFieldSpecificMetaInClosure, extractFieldMappings,
 	buildFormGroupFunctionFactory,
+	resetAsyncValidatorsRecursive,
 	touchAndUpdateValidityRecursive, resetValidityRecursive, advanceUpdateStategyOfInvalidControlsRecursive,
 	generateNewModel, updateMeta
 } from './_formdata-utils';
@@ -199,6 +200,12 @@ export class DynaformService {
 		return newFullMeta;
 	}
 
+	resetForm(form?: FormGroup): void {
+		// Loop through the form and call reset on any Async validators
+		resetAsyncValidatorsRecursive(form || this.form);
+		(form || this.form).reset();
+	}
+
 	buildNewModel(originalModel: StringMap<any>, formVal?: StringMap<any>, meta?: StringMap<any>): StringMap<any> {
 		console.log('%c *** buildNewModel *** ', this.conGreen);
 		const mapping = extractFieldMappings(meta || this.meta); // Memoize

src/app/dynaform/services/friendly-validation-errors.service.ts

@@ -4,16 +4,14 @@ import { FriendlyValErrors } from './../interfaces';
 import { path } from 'ramda';
 
 
-@Injectable()
+@Injectable({
+	providedIn: 'root'
+})
 export class FriendlyValidationErrorsService {
 
 	fErrs: FriendlyValErrors;
 
-	ident;
-
 	constructor(@Inject(FRIENDLY_VALIDATION_ERRORS) fErrs: FriendlyValErrors) {
-		this.ident = new Date().getTime();
-		console.log(this.ident, this.fErrs);
 		if (!this.fErrs) {
 			this.fErrs = friendlyValidationErrors;
 		}

src/app/dynaform/utils.ts

@@ -1,6 +1,10 @@
 // Utility functions for Dyynaform consumers
 
+import { FormControl, ValidationErrors } from '@angular/forms';
 import { ValueTransformer } from './interfaces';
+import { Observable, of, merge } from 'rxjs';
+import { filter, map, mapTo, switchMap, } from 'rxjs/internal/operators';
+import { FindValueOperator } from 'rxjs/internal/operators/find';
 
 // Dropdown Modified Input - Starts With / Contains / Matches
 const standardModifiers = ['Starts with', 'Contains', 'Matches'];
@@ -54,4 +58,32 @@ const excludeFields = (obj: StringMap<any>, fieldsToExclude: string | string[])
 	);
 };
 
-export { standardModifiers, standardTransformer, toArrTag, arrayPad, arrayToMeta, excludeFields };
+// Higher order function that takes a bound test function and failure flag
+// and returns an AsyncValidator-compatible function
+// that in turn returns an Observable of ValidationErrors
+const makeAsyncTest = (boundFnName: string, failureFlag: string): (fc: FormControl) => Observable<ValidationErrors> => {
+	let initialValue;
+	return function(fc: FormControl | 'RESET'): Observable<ValidationErrors> {
+		if (fc === 'RESET') {
+			// Special value that resets the initial value
+			initialValue = '';
+			return of({});
+		}
+		if (fc.pristine) {
+			initialValue = fc.value;
+		}
+		return merge(
+			of(fc).pipe(
+				filter(_fc => _fc.value !== initialValue),
+				switchMap(_fc => this[boundFnName](_fc.value)),
+				map(res => res ? {} : { [failureFlag]: true } )
+			),
+			of(fc).pipe(
+				filter(_fc => _fc.value === initialValue),
+				mapTo({})
+			)
+		);
+	};
+};
+
+export { standardModifiers, standardTransformer, toArrTag, arrayPad, arrayToMeta, excludeFields, makeAsyncTest };

src/polyfills.ts

@@ -76,4 +76,4 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
- */
+ */

tsconfig.json

@@ -7,7 +7,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],