Fix recursive form validation

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.0.0-beta6
+
+Fix
+- Recursive form validation fixed
+- Fixed change detection of dynamic created components 
+
 ## 2.0.0-beta5
 
 Fix

package.json

@@ -16,7 +16,7 @@
     "type": "git"
   },
   "license": "MIT",
-  "version": "2.0.0-beta5",
+  "version": "2.0.0-beta6",
   "peerDependencies": {
     "@angular/common": "^7.2.0 || ^8.0.0",
     "@angular/core": "^7.2.0 || ^8.0.0",

src/lib/abstract-form-group/abstract-form-group.component.ts

@@ -137,6 +137,8 @@ export abstract class AbstractFormGroupComponent<FormType extends AbstractGroupT
         if (host instanceof HTMLElement && !host.contains(component.location.nativeElement)) {
           host.appendChild(component.location.nativeElement);
         }
+
+        component.changeDetectorRef.detectChanges();
       });
     });
 

src/lib/form-builder/form-builder.component.ts

@@ -147,11 +147,7 @@ export class FormBuilderComponent<T extends { [key: string]: any } = {}> impleme
   }
 
   public submit(): T {
-    Object.keys(this.group.controls).forEach((field) => {
-      const control = this.group.get(field);
-      control.markAsDirty();
-      control.updateValueAndValidity();
-    });
+    this.validateAllFormFields(this.group);
 
     if (!this.group.valid) {
       return;
@@ -162,6 +158,18 @@ export class FormBuilderComponent<T extends { [key: string]: any } = {}> impleme
     return this.group.value;
   }
 
+  private validateAllFormFields(formGroup: FormGroup): void {
+    Object.keys(formGroup.controls).forEach(field => {
+      const control = formGroup.get(field);
+      if (control instanceof FormControl) {
+        control.markAsTouched({onlySelf: true});
+        control.updateValueAndValidity({onlySelf: true});
+      } else if (control instanceof FormGroup) {
+        this.validateAllFormFields(control);
+      }
+    });
+  }
+
   public getErrors(group?: FormGroup | FormArray): { [key: string]: ValidationErrors } | ValidationErrors[] | null {
     const errors = group instanceof FormArray ? [] : {};
 

src/lib/form-field/form-field.directive.ts

@@ -45,6 +45,7 @@ export class FormFieldDirective extends AbstractFormFieldComponent<any> implemen
     if (host instanceof HTMLElement && !host.contains(component.location.nativeElement)) {
       host.appendChild(component.location.nativeElement);
     }
+
     component.changeDetectorRef.detectChanges();
   }
 }

src/lib/form-slot/form-slot.directive.ts

@@ -9,7 +9,7 @@ export class FormSlotDirective implements AfterViewInit {
   @Input()
   public mwFieldName: string;
 
-  private renderFn: (viewRef: ViewContainerRef,  elRef: ElementRef) => void;
+  private renderFn: (viewRef: ViewContainerRef, elRef: ElementRef) => void;
 
   constructor(public viewRef: ViewContainerRef,
               public elRef: ElementRef,
@@ -22,7 +22,7 @@ export class FormSlotDirective implements AfterViewInit {
     }
   }
 
-  public setup(renderFunction: (viewRef: ViewContainerRef,  elRef: ElementRef) => void): void {
+  public setup(renderFunction: (viewRef: ViewContainerRef, elRef: ElementRef) => void): void {
     this.renderFn = renderFunction;
     if (this.viewRef) {
       this.ngAfterViewInit();