fix(forms): Add checkIsDirty for disable show errors in form on init

apps/demo/src/app/app.component.ts

@@ -47,7 +47,7 @@ export class AppComponent implements OnDestroy {
         lang => {
           this._bsLocaleService.use(lang);
         }
-        );
+      );
       this._tokenService.tokenHasExpired$.pipe(
         takeUntil(this._destroyed$)
       ).subscribe(result => {
@@ -80,7 +80,7 @@ export class AppComponent implements OnDestroy {
               data =>
                 this.onLogoutSuccess(undefined)
             )
-          );
+        );
       } else {
         if (!this.accountService.current) {
           this.accountService.info(token).subscribe(
@@ -125,7 +125,8 @@ export class AppComponent implements OnDestroy {
       initialState: {
         title: this._translateService.instant('Authorization'),
         yesTitle: this._translateService.instant('#'),
-        data: {}
+        data: {},
+        checkIsDirty: true
       }
     });
     bsModalRef.content.yes.subscribe(

libs/@rucken/web/src/components/base/base-prompt-form-modal.component.ts

@@ -7,6 +7,8 @@ import { IFactoryModel, IModel } from 'ngx-repository';
 
 export class BasePromptFormModalComponent<TModel extends IModel> {
 
+  @Input()
+  checkIsDirty?: boolean;
   @Input()
   processing: boolean;
   @Input()

libs/@rucken/web/src/components/base/base-prompt-modal.component.ts

@@ -4,6 +4,8 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 
 export class BasePromptModalComponent {
 
+  @Input()
+  checkIsDirty?: boolean;
   @Input()
   processing: boolean;
   @Input()

libs/@rucken/web/src/components/base/base-prompt-panel.component.ts

@@ -7,6 +7,8 @@ import { IFactoryModel, IModel } from 'ngx-repository';
 
 export class BasePromptPanelComponent<TModel extends IModel> implements ControlValueAccessor, OnChanges {
 
+  @Input()
+  checkIsDirty?: boolean;
   @Input()
   processing: boolean;
   @Input()

libs/@rucken/web/src/components/entities/content-type/content-type-modal/content-type-modal.component.html

@@ -1,10 +1,10 @@
 <form [formGroup]="form" novalidate>
   <prompt-form-modal [title]="title" [message]="message" [noTitle]="noTitle" [yesTitle]="yesTitle" [readonly]="readonly" (no)="onNoClick()"
     (yes)="onYesClick()" [data]="data" [processing]="processing">
-    <form-group [form]="form" name="title" [title]="strings.title">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="title" [title]="strings.title">
       <input formControlName="title" [readonly]="readonly" focused/>
     </form-group>
-    <form-group [form]="form" name="name" [title]="strings.name">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="name" [title]="strings.name">
       <input formControlName="name" [readonly]="readonly" />
     </form-group>
   </prompt-form-modal>

libs/@rucken/web/src/components/entities/group/group-modal/group-modal.component.html

@@ -1,10 +1,10 @@
 <form [formGroup]="form" novalidate>
   <prompt-form-modal [title]="title" [message]="message" [noTitle]="noTitle" [yesTitle]="yesTitle" [readonly]="readonly" (no)="onNoClick()"
     (yes)="onYesClick()" [data]="data" [processing]="processing">
-    <form-group [form]="form" name="title" [title]="strings.title">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="title" [title]="strings.title">
       <input formControlName="title" [readonly]="readonly" focused/>
     </form-group>
-    <form-group [form]="form" name="name" [title]="strings.name">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="name" [title]="strings.name">
       <input formControlName="name" [readonly]="readonly" />
     </form-group>
     <group-permissions-grid [mockedItems]="data.permissions" (mockedItemsChange)="onPermissionsChange($event)" [readonly]="readonly"

libs/@rucken/web/src/components/entities/permission/permission-modal/permission-modal.component.html

@@ -1,13 +1,13 @@
 <form [formGroup]="form" novalidate>
   <prompt-form-modal [title]="title" [message]="message" [noTitle]="noTitle" [yesTitle]="yesTitle" [readonly]="readonly" (no)="onNoClick()"
     (yes)="onYesClick()" [data]="data" [processing]="processing">
-    <form-group [form]="form" name="title" [title]="strings.title">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="title" [title]="strings.title">
       <input formControlName="title" [readonly]="readonly" focused/>
     </form-group>
-    <form-group [form]="form" name="name" [title]="strings.name">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="name" [title]="strings.name">
       <input formControlName="name" [readonly]="readonly" />
     </form-group>
-    <form-group [form]="form" name="contentType" [title]="strings.contentType">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="contentType" [title]="strings.contentType">
       <content-type-select [searchField]="form.get('contentType')" [readonly]="readonly" [apiUrl]="apiUrl" *ngIf="data.id" #contentTypeSelect>
         <input formControlName="contentType" [typeaheadLatinize]="false" [typeaheadMinLength]="0" [typeaheadOptionField]="contentTypeSelect.nameField" [typeahead]="contentTypeSelect.repository.items$"
           (typeaheadOnSelect)="contentTypeSelect.checkChange(form.get('contentType').value,$event?.item)?form.get('contentType').setValue($event.item):null" [readonly]="readonly" />

libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.html

@@ -3,37 +3,37 @@
     <div class="col-md-6">
       <div class="row">
         <div class="col-md-12">
-          <form-group [form]="form" name="username" [title]="strings.username">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="username" [title]="strings.username">
             <input formControlName="username" [readonly]="isReadonly" focused/>
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="email" [title]="strings.email">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="email" [title]="strings.email">
             <input formControlName="email" [readonly]="isReadonly" />
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="dateOfBirth" [title]="strings.dateOfBirth">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="dateOfBirth" [title]="strings.dateOfBirth">
             <input bsDatepicker formControlName="dateOfBirth" [readonly]="isReadonly" />
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="password" [title]="strings.password">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="password" [title]="strings.password">
             <input formControlName="password" type="password" [readonly]="isReadonly" />
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="rePassword" [title]="strings.rePassword">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="rePassword" [title]="strings.rePassword">
             <input formControlName="rePassword" type="password" [readonly]="isReadonly" />
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="lastName" [title]="strings.lastName">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="lastName" [title]="strings.lastName">
             <input formControlName="lastName" [readonly]="isReadonly" />
           </form-group>
         </div>
         <div class="col-md-6">
-          <form-group [form]="form" name="firstName" [title]="strings.firstName">
+          <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="firstName" [title]="strings.firstName">
             <input formControlName="firstName" [readonly]="isReadonly" />
           </form-group>
         </div>
@@ -45,7 +45,7 @@
       </div>
     </div>
     <div class="col-md-6">
-      <form-group [title]="strings.roles">
+      <form-group [checkIsDirty]="checkIsDirty" [title]="strings.roles">
         <div class="checkboxes-group form-control">
           <div class="checkbox">
             <label>

libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.ts

@@ -55,14 +55,16 @@ export class ProfilePanelComponent extends BasePromptPanelComponent<User> implem
     this.onSaveClick();
   }
   onSaveClick() {
+    this.processing = true;
     this._accountService.update(
       this.data
     ).subscribe(
       data => this.onSave(data),
       error => this.onSaveError(error)
-      );
+    );
   }
   onSave(data: { token: string; user: User; }) {
+    this.processing = false;
     this.data = data.user;
   }
   onError(error: any) {
@@ -71,6 +73,7 @@ export class ProfilePanelComponent extends BasePromptPanelComponent<User> implem
     }).subscribe();
   }
   onSaveError(error: any) {
+    this.processing = false;
     this.form.externalErrors = this._errorsExtractor.getValidationErrors(error);
     if (!this.form.externalErrors) {
       this.onError(error);

libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.html

@@ -5,44 +5,44 @@
       <div class="col-md-6">
         <div class="row">
           <div class="col-md-12">
-            <form-group [form]="form" name="username" [title]="strings.username">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="username" [title]="strings.username">
               <input formControlName="username" [readonly]="readonly" focused/>
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="email" [title]="strings.email">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="email" [title]="strings.email">
               <input formControlName="email" [readonly]="readonly" />
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="dateOfBirth" [title]="strings.dateOfBirth">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="dateOfBirth" [title]="strings.dateOfBirth">
               <input bsDatepicker formControlName="dateOfBirth" [readonly]="readonly" />
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="password" [title]="strings.password">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="password" [title]="strings.password">
               <input formControlName="password" type="password" [readonly]="readonly" />
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="rePassword" [title]="strings.rePassword">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="rePassword" [title]="strings.rePassword">
               <input formControlName="rePassword" type="password" [readonly]="readonly" />
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="lastName" [title]="strings.lastName">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="lastName" [title]="strings.lastName">
               <input formControlName="lastName" [readonly]="readonly" />
             </form-group>
           </div>
           <div class="col-md-6">
-            <form-group [form]="form" name="firstName" [title]="strings.firstName">
+            <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="firstName" [title]="strings.firstName">
               <input formControlName="firstName" [readonly]="readonly" />
             </form-group>
           </div>
         </div>
       </div>
       <div class="col-md-6">
-        <form-group [title]="strings.roles">
+        <form-group [checkIsDirty]="checkIsDirty" [title]="strings.roles">
           <div class="checkboxes-group form-control">
             <div class="checkbox">
               <label>

libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.ts

@@ -23,6 +23,5 @@ export class UserModalComponent extends BasePromptFormModalComponent<User> {
     const data: User = this.data;
     data.groups = groups;
     this.data = data;
-    this.onYesClick();
   }
 }

libs/@rucken/web/src/components/modals/auth-modal/auth-modal.component.html

@@ -1,10 +1,10 @@
 <form [formGroup]="form" novalidate>
   <prompt-form-modal [title]="title" [message]="message" [readonly]="readonly" [noTitle]="noTitle" [yesTitle]="yesTitle" (no)="onNoClick()"
     (yes)="onYesClick()" [data]="data" [processing]="processing">
-    <form-group [form]="form" name="username" [title]="strings.username">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="username" [title]="strings.username">
       <input formControlName="username" focused/>
     </form-group>
-    <form-group [form]="form" name="password" [title]="strings.password">
+    <form-group [checkIsDirty]="checkIsDirty" [form]="form" name="password" [title]="strings.password">
       <input formControlName="password" type="password" />
     </form-group>
   </prompt-form-modal>

libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.html

@@ -2,7 +2,7 @@
   <prompt-form-modal [title]="title" [message]="message" [noTitle]="noTitle" [yesTitle]="yesTitle" [readonly]="readonly" (no)="onNoClick()"
     (yes)="onYesClick()" [data]="data" [processing]="processing">
     <span *ngFor="let key of keys; let i = index">
-      <form-group [form]="form" [name]="key" [title]="strings[key]">
+      <form-group [checkIsDirty]="checkIsDirty" [form]="form" [name]="key" [title]="strings[key]">
         <input [formControlName]="key" [readonly]="readonly" [autofocus]="i===0" />
       </form-group>
     </span>

libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { DynamicFormGroup } from 'ngx-dynamic-form-builder';
 import { BasePromptFormModalComponent } from '../../base/base-prompt-form-modal.component';

libs/@rucken/web/src/components/others/form-group/form-group.component.ts

@@ -14,7 +14,7 @@ export class FormGroupComponent implements AfterViewInit {
   checkIsDirty?: boolean;
 
   get errors(): Observable<IShortValidationErrors | string[]> | Observable<any[]> {
-    if (this.form && (this.checkIsDirty === false || this.form.dirty)) {
+    if (this.form && (this.checkIsDirty !== true || this.form.dirty)) {
       return this.form.customValidateErrors.pipe(
         map(customValidateErrors =>
           customValidateErrors[this.name] ? customValidateErrors[this.name] : []