fix: add usnscribe from subscribe to form group changes, change trans…

…form class validator to usage async angular validator

apps/demo/src/polyfills.ts

@@ -43,6 +43,7 @@
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
 
 /**
  * Web Animations `@angular/platform-browser/animations`

libs/ngx-dynamic-form-builder/src/index.ts

@@ -1,8 +1,10 @@
 export * from './lib/models/dictionary';
 export * from './lib/models/dynamic-form-group-config';
 export * from './lib/models/dynamic-form-group-field';
-export * from './lib/models/index';
+export * from './lib/models/error-property-name';
+export * from './lib/models/form-model';
 export * from './lib/models/short-validation-errors';
+export * from './lib/models/validator-function-type';
 export * from './lib/utils/dynamic-form-builder';
 export * from './lib/utils/dynamic-form-control';
 export * from './lib/utils/dynamic-form-group';

libs/ngx-dynamic-form-builder/src/lib/models/dynamic-form-group-field.ts

@@ -1,8 +1,9 @@
-import { DynamicFormGroup } from '../utils/dynamic-form-group';
 import { ValidationMetadata } from 'class-validator/metadata/ValidationMetadata';
+import { DynamicFormGroup } from '../utils/dynamic-form-group';
+import { ValidatorFunctionType } from './validator-function-type';
 
 export interface DynamicFormGroupField {
   data: any | DynamicFormGroup<any>;
-  validationFunctions: any[];
+  validationFunctions: ValidatorFunctionType[];
   validationDefinitions: ValidationMetadata[];
 }

libs/ngx-dynamic-form-builder/src/lib/models/error-property-name.ts

@@ -0,0 +1 @@
+export type ErrorPropertyName = 'nestedValidate' | 'customValidation' | 'dynamicValidate';

libs/ngx-dynamic-form-builder/src/lib/models/form-model.ts

@@ -0,0 +1,5 @@
+import { FormArray } from '@angular/forms';
+import { DynamicFormGroup } from '../utils/dynamic-form-group';
+
+// Enforces the properties of the object, if supplied, to be of the original type or DynamicFormGroup or, FormArray
+export type FormModel<T> = { [P in keyof T]?: T[P] | DynamicFormGroup<any> | FormArray };

libs/ngx-dynamic-form-builder/src/lib/models/validator-function-type.ts

@@ -0,0 +1,13 @@
+import { AsyncValidatorFn, ValidatorFn } from '@angular/forms';
+
+export interface ValidatorFunctionSyncType {
+  type: 'sync';
+  validator: ValidatorFn;
+}
+
+export interface ValidatorFunctionAsyncType {
+  type: 'async';
+  validator: AsyncValidatorFn;
+}
+
+export type ValidatorFunctionType = ValidatorFunctionSyncType | ValidatorFunctionAsyncType;

libs/ngx-dynamic-form-builder/src/lib/utils/dynamic-form-builder.ts

@@ -8,7 +8,8 @@ import {
   isDynamicFormGroupConfig,
   isLegacyOrOpts
 } from '../models/dynamic-form-group-config';
-import { DynamicFormGroup, FormModel, getClassValidators } from './dynamic-form-group';
+import { FormModel } from '../models/form-model';
+import { DynamicFormGroup, getClassValidators } from './dynamic-form-group';
 
 export class DynamicFormBuilder extends FormBuilder {
   // ******************
@@ -19,6 +20,9 @@ export class DynamicFormBuilder extends FormBuilder {
     controlsConfig?: FormModel<TModel> | DynamicFormGroupConfig | { [key: string]: any },
     options?: AbstractControlOptions | DynamicFormGroupConfig
   ): DynamicFormGroup<TModel> {
+    if (!controlsConfig && !options) {
+      options = {};
+    }
     // Process the group with the controlsConfig passed into extra instead. (What does this accomplish?)
     if (
       controlsConfig &&
@@ -161,9 +165,7 @@ export class DynamicFormBuilder extends FormBuilder {
     });
 
     // Add a listener to the dynamic group for value changes; on change, execute validation
-    dynamicFormGroup.valueChanges.subscribe(data => {
-      dynamicFormGroup.validate(undefined, extra && extra.customValidatorOptions);
-    });
+    dynamicFormGroup.subscribeToValueChanges(undefined, extra && extra.customValidatorOptions);
 
     return dynamicFormGroup;
   }

libs/ngx-dynamic-form-builder/src/lib/utils/dynamic-form-control.ts

@@ -1,13 +1,21 @@
-import { FormControl } from '@angular/forms';
-import { DynamicFormGroupField } from '../models';
+import { AsyncValidatorFn, FormControl, ValidatorFn } from '@angular/forms';
 import { ValidationMetadata } from 'class-validator/metadata/ValidationMetadata';
+import { Observable } from 'rxjs';
+import { DynamicFormGroupField } from '../models/dynamic-form-group-field';
 
 export class DynamicFormControl extends FormControl {
   public validationDefinitions: ValidationMetadata[];
 
   constructor(fieldDefinition: DynamicFormGroupField) {
-    super(fieldDefinition.data, fieldDefinition.validationFunctions);
-
+    super(
+      fieldDefinition.data instanceof Observable ? null : fieldDefinition.data,
+      fieldDefinition.validationFunctions
+        .filter(func => func.type === 'sync')
+        .map(func => func.validator as ValidatorFn),
+      fieldDefinition.validationFunctions
+        .filter(func => func.type === 'async')
+        .map(func => func.validator as AsyncValidatorFn)
+    );
     this.validationDefinitions = fieldDefinition.validationDefinitions;
   }
 }