feat: add support native Angular validators (#183), support correct work with isOptional (#188), add excludeGroups for fix recursive errors and unexpected creation of submodels (#185)

Add support native Angular validators #183
```
    this.form = this.fb.rootFormGroup(
      ComboCompany,
      {
        name: undefined, // issue #188
        regionNum: undefined, // issue #188
      },
      { angularValidators: { regionNum: [Validators.required] } } // issue #183
    );
```

v2: "Greedy" creation of nested Models causes recursive errors and unexpected creation of submodels #185
```
export class Company {
...
  @ValidateNested()
  @type(() => Department)
  @expose({ groups: ['nested'] })
  department?: Department | undefined;
...
}
...
    this.form = this.formBuilder.rootFormGroup(
      Department,
      this.getEmptyDepartment(),
      {
        classTransformOptions: {
          excludeGroups: ['nested'],
        },
      }
    );
...
```

Author: EndyKaufman

CHANGELOG.md

@@ -4,10 +4,9 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [2.0.1](https://github.com/EndyKaufman/ngx-dynamic-form-builder/compare/v2.0.0...v2.0.1) (2022-01-23)
 
-
 ### Bug Fixes
 
-* update readme ([f7f9ca3](https://github.com/EndyKaufman/ngx-dynamic-form-builder/commit/f7f9ca3e3abf955a6c4425c679aaa5c216d4c5e8))
+- update readme ([f7f9ca3](https://github.com/EndyKaufman/ngx-dynamic-form-builder/commit/f7f9ca3e3abf955a6c4425c679aaa5c216d4c5e8))
 
 ## 2.0.0 (2022-01-23)
 

apps/demo/src/app/panels/combo-company-panel/combo-company-panel.component.html

@@ -17,11 +17,11 @@
       [placeholder]="strings.regionNum"
     />
     <mat-error *ngIf="errors?.['regionNum']?.length">{{
-      errors?.['regionNum'][0]
+      errors?.['regionNum']
     }}</mat-error>
-    <!--mat-error *ngIf="nativeErrors?.regionNum?.required">
+    <mat-error *ngIf="form.get('regionNum')?.errors?.['required']">
       {{ 'region num should not be empty (native angular)' | transloco }}
-    </mat-error-->
+    </mat-error>
   </mat-form-field>
   <div class="full-width">
     <p>Form status: {{ form.status | json }}</p>

apps/demo/src/app/panels/combo-company-panel/combo-company-panel.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Validators } from '@angular/forms';
 import { DynamicFormBuilder, DynamicFormGroup } from 'ngx-dynamic-form-builder';
 import { ComboCompany } from './../../shared/models/combo-company';
 
@@ -26,14 +27,19 @@ export class ComboCompanyPanelComponent {
   savedItem?: ComboCompany;
 
   constructor() {
-    this.form = this.fb.rootFormGroup(ComboCompany, {
-      name: '',
-      regionNum: '',
-    });
+    this.form = this.fb.rootFormGroup(
+      ComboCompany,
+      {
+        name: undefined,
+        regionNum: undefined,
+      },
+      { angularValidators: { regionNum: [Validators.required] } }
+    );
   }
   onLoadClick(): void {
     this.savedItem = undefined;
     this.form.json = this.jsonItem;
+    console.log(this.form);
   }
   onLoadAsObjectClick(): void {
     this.savedItem = undefined;
@@ -43,6 +49,7 @@ export class ComboCompanyPanelComponent {
     object.regionNum = this.jsonItem.regionNum;
     object.nameLocale = this.jsonItem.nameLocale;
     this.form.object = object;
+    console.log(this.form);
   }
   onClearClick(): void {
     this.savedItem = undefined;
@@ -53,6 +60,7 @@ export class ComboCompanyPanelComponent {
     this.form.object = new ComboCompany();
   }
   onSaveClick(): void {
+    console.log(this.form);
     if (this.form.valid) {
       this.savedItem = this.form.json;
     } else {

apps/demo/src/app/panels/i18n-company-panel/i18n-company-panel.component.html

@@ -13,7 +13,7 @@
   </mat-form-field>
   <mat-form-field class="full-width">
     <input matInput formControlName="name" [placeholder]="strings.name" />
-    <mat-error *ngIf="errors?.['name']?.messages?.length > 0">{{
+    <mat-error *ngIf="errors?.['name']?.length > 0">{{
       errors?.['name'][0]
     }}</mat-error>
   </mat-form-field>

apps/demo/src/app/panels/new-api/new-api.component.ts

@@ -17,6 +17,7 @@ import {
   ValidatorConstraintInterface,
 } from 'class-validator-multi-lang';
 import {
+  DeepPartial,
   DynamicFormBuilder,
   DynamicFormGroup,
   getCustomDataToRootFormGroup,
@@ -106,6 +107,11 @@ export class Company {
   @IsBoolean({ each: true })
   @Expose()
   permissions!: boolean[];
+
+  @ValidateNested()
+  @Type(() => Department)
+  @Expose({ groups: ['nested'] })
+  department?: Department | undefined;
 }
 
 export class PeopleAge {
@@ -224,7 +230,12 @@ export class NewApiComponent {
   constructor() {
     this.form = this.formBuilder.rootFormGroup(
       Department,
-      this.getEmptyDepartment()
+      this.getEmptyDepartment(),
+      {
+        classTransformOptions: {
+          excludeGroups: ['nested'],
+        },
+      }
     );
     console.log(this.form);
   }
@@ -250,7 +261,7 @@ export class NewApiComponent {
   }
 
   onLoadClick(): void {
-    this.form.json = this.getExampleDepartment();
+    this.form.json = this.getExampleDepartment() as Department;
     console.log(this.form);
   }
 
@@ -267,7 +278,7 @@ export class NewApiComponent {
   onClearClick(): void {
     this.savedItem$.next(undefined);
 
-    this.form.json = this.getEmptyDepartment();
+    this.form.json = this.getEmptyDepartment() as Department;
     console.log(this.form);
   }
 
@@ -281,7 +292,7 @@ export class NewApiComponent {
 
   //
 
-  private getExampleDepartment(): Department {
+  private getExampleDepartment(): DeepPartial<Department> {
     return {
       id: 11,
       name: 'dep name 1',
@@ -292,6 +303,7 @@ export class NewApiComponent {
         state: 'California',
         house: '221b',
         permissions: [true, false],
+        department: { name: 'name' },
       },
       groups: [
         { id: 33, name: 'group name 1' },
@@ -314,7 +326,7 @@ export class NewApiComponent {
     };
   }
 
-  private getEmptyDepartment(): Department {
+  private getEmptyDepartment(): DeepPartial<Department> {
     return {
       name: '',
       company: {
@@ -327,7 +339,7 @@ export class NewApiComponent {
       cabinets: [],
       peopleAges: [],
       transports: [],
-    } as unknown as Department;
+    } as DeepPartial<Department>;
   }
 
   // permissions

apps/demo/src/app/panels/project-panel/project-panel-step-2.component.html

@@ -27,9 +27,9 @@ <h4>
     <mat-error *ngIf="errors?.['tasks']?.length">{{
       errors?.['tasks']?.join(', ')
     }}</mat-error>
-    <!--mat-error *ngIf="nativeErrors?.maxLength3">{{
-      'Tasks max length = 3 (native angular)' | transloco
-    }}</mat-error-->
+    <mat-error *ngIf="form.errors?.['maxLength3']">
+      {{ 'Tasks max length = 3 (native angular)' | transloco }}
+    </mat-error>
   </h4>
   <mat-list role="list">
     <mat-list-item

apps/demo/src/app/panels/project-panel/project-panel-step-2.component.ts

@@ -46,14 +46,12 @@ export class ProjectPanelStep2Component implements OnDestroy {
         classValidatorOptions: {
           groups: [ProjectPanelStepsEnum.Step2],
         },
-        validator: this.classLevelValidator,
+        validators: this.classLevelValidator,
       }
     );
   }
   classLevelValidator(group: DynamicFormGroup<Project>) {
-    return group.object && group.object.tasks && group.object.tasks.length > 3
-      ? { maxLength3: true }
-      : null;
+    return group?.value?.tasks?.length > 3 ? { maxLength3: true } : null;
   }
   getTasksArray() {
     return this.form.get('tasks') as FormArray;

apps/demo/src/assets/i18n/en.json

@@ -4,6 +4,7 @@
   "Experimental: registration panel": "Experimental: registration panel",
   "Other files": "Other files",
   "New API": "New API",
+  "region num should not be empty (native angular)": "region num should not be empty (native angular)",
   "Login form": "Login form",
   "Username": "Username",
   "Password": "Password",
@@ -35,6 +36,7 @@
   "Save": "Save",
   "email": "email",
   "dateOfBirth": "dateOfBirth",
+  "Tasks max length = 3 (native angular)": "Tasks max length = 3 (native angular)",
   "English": "English",
   "Russian": "Русский",
   "Experimental + transloco + i18n": "Experimental + transloco + i18n",
@@ -52,7 +54,6 @@
   "Only abc field": "Only abc field",
   "it should match the cool 'abc' string": "it should match the cool 'abc' string",
   "$constraint1 do not match to $property": "$constraint1 do not match to $property",
-  "region num should not be empty (native angular)": "region num should not be empty (native angular)",
   "Form native errors:": "Form native errors:",
   "name": "name",
   "regionNum": "regionNum",

apps/demo/src/assets/i18n/ru.json

@@ -4,6 +4,7 @@
   "Experimental: registration panel": "Экспериментально: регистрационная панель",
   "Other files": "Другие файлы",
   "New API": "Новое АПИ",
+  "region num should not be empty (native angular)": "номер региона не должен быть пустым (нативный angular)",
   "Login form": "Форма входа",
   "Username": "Имя пользователя",
   "Password": "Пароль",
@@ -35,6 +36,7 @@
   "Save": "Сохранить",
   "email": "эл. адрес",
   "dateOfBirth": "дата рождения",
+  "Tasks max length = 3 (native angular)": "Tasks max length = 3 (native angular)",
   "English": "English",
   "Russian": "Русский",
   "Experimental + transloco + i18n": "Экспериментально + transloco + перевод",
@@ -52,7 +54,6 @@
   "Only abc field": "Должно включать только abc",
   "it should match the cool 'abc' string": "он должен соответствовать классной строке 'abc'",
   "$constraint1 do not match to $property": "$constraint1 не равно $property",
-  "region num should not be empty (native angular)": "номер региона не должен быть пустым (нативный angular)",
   "Form native errors:": "Нативные ошибки:",
   "name": "название",
   "regionNum": "номер региона",

cypress.json

@@ -1,6 +1,6 @@
 {
   "viewportWidth": 1024,
-  "viewportHeight": 1024,
+  "viewportHeight": 1524,
   "reporter": "cypress-multi-reporters",
   "reporterOptions": {
     "reporterEnabled": "mochawesome",