From ae1bcd4d0aec350886eb94fd901fdefd6db9cf76 Mon Sep 17 00:00:00 2001
From: endy <admin@site15.ru>
Date: Wed, 25 Apr 2018 15:45:16 +0500
Subject: [PATCH] fix(forms): Add checkIsDirty for disable show errors in form
 on init

---
 apps/demo/src/app/app.component.ts               |  7 ++++---
 .../base/base-prompt-form-modal.component.ts     |  2 ++
 .../base/base-prompt-modal.component.ts          |  2 ++
 .../base/base-prompt-panel.component.ts          |  2 ++
 .../content-type-modal.component.html            |  4 ++--
 .../group/group-modal/group-modal.component.html |  4 ++--
 .../permission-modal.component.html              |  6 +++---
 .../profile-panel/profile-panel.component.html   | 16 ++++++++--------
 .../profile-panel/profile-panel.component.ts     |  5 ++++-
 .../user/user-modal/user-modal.component.html    | 16 ++++++++--------
 .../user/user-modal/user-modal.component.ts      |  1 -
 .../modals/auth-modal/auth-modal.component.html  |  4 ++--
 .../entity-modal/entity-modal.component.html     |  2 +-
 .../entity-modal/entity-modal.component.ts       |  2 +-
 .../others/form-group/form-group.component.ts    |  2 +-
 15 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
index 58a0e364..ba99aa38 100644
--- a/apps/demo/src/app/app.component.ts
+++ b/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('Sign in'),
-        data: {}
+        data: {},
+        checkIsDirty: true
       }
     });
     bsModalRef.content.yes.subscribe(
diff --git a/libs/@rucken/web/src/components/base/base-prompt-form-modal.component.ts b/libs/@rucken/web/src/components/base/base-prompt-form-modal.component.ts
index b9d1d540..255a2763 100644
--- a/libs/@rucken/web/src/components/base/base-prompt-form-modal.component.ts
+++ b/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()
diff --git a/libs/@rucken/web/src/components/base/base-prompt-modal.component.ts b/libs/@rucken/web/src/components/base/base-prompt-modal.component.ts
index 7559cb21..f3ab6967 100644
--- a/libs/@rucken/web/src/components/base/base-prompt-modal.component.ts
+++ b/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()
diff --git a/libs/@rucken/web/src/components/base/base-prompt-panel.component.ts b/libs/@rucken/web/src/components/base/base-prompt-panel.component.ts
index fe8e5fd5..d2b039fa 100644
--- a/libs/@rucken/web/src/components/base/base-prompt-panel.component.ts
+++ b/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()
diff --git a/libs/@rucken/web/src/components/entities/content-type/content-type-modal/content-type-modal.component.html b/libs/@rucken/web/src/components/entities/content-type/content-type-modal/content-type-modal.component.html
index 1a351f98..28de4f9d 100644
--- a/libs/@rucken/web/src/components/entities/content-type/content-type-modal/content-type-modal.component.html
+++ b/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>
diff --git a/libs/@rucken/web/src/components/entities/group/group-modal/group-modal.component.html b/libs/@rucken/web/src/components/entities/group/group-modal/group-modal.component.html
index 6a179078..0fa3290b 100644
--- a/libs/@rucken/web/src/components/entities/group/group-modal/group-modal.component.html
+++ b/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"
diff --git a/libs/@rucken/web/src/components/entities/permission/permission-modal/permission-modal.component.html b/libs/@rucken/web/src/components/entities/permission/permission-modal/permission-modal.component.html
index 0a1b51c9..8e431a2e 100644
--- a/libs/@rucken/web/src/components/entities/permission/permission-modal/permission-modal.component.html
+++ b/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" />
diff --git a/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.html b/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.html
index b7061148..b55c96e0 100644
--- a/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.html
+++ b/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>
diff --git a/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.ts b/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.ts
index e87633ee..e714481c 100644
--- a/libs/@rucken/web/src/components/entities/user/profile-panel/profile-panel.component.ts
+++ b/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);
diff --git a/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.html b/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.html
index 240326f8..d83906ab 100644
--- a/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.html
+++ b/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>
diff --git a/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.ts b/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.ts
index 7eb34d7a..423d6b44 100644
--- a/libs/@rucken/web/src/components/entities/user/user-modal/user-modal.component.ts
+++ b/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();
   }
 }
diff --git a/libs/@rucken/web/src/components/modals/auth-modal/auth-modal.component.html b/libs/@rucken/web/src/components/modals/auth-modal/auth-modal.component.html
index be49f730..eb106dc0 100644
--- a/libs/@rucken/web/src/components/modals/auth-modal/auth-modal.component.html
+++ b/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>
diff --git a/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.html b/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.html
index 0c28869d..a558bad6 100644
--- a/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.html
+++ b/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>
diff --git a/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.ts b/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.ts
index 243c2d09..978d0788 100644
--- a/libs/@rucken/web/src/components/others/entity-modal/entity-modal.component.ts
+++ b/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';
diff --git a/libs/@rucken/web/src/components/others/form-group/form-group.component.ts b/libs/@rucken/web/src/components/others/form-group/form-group.component.ts
index 1a5aece9..ea508388 100644
--- a/libs/@rucken/web/src/components/others/form-group/form-group.component.ts
+++ b/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] : []