refactor: form buttons and validations

npm/ng-packs/package.json

@@ -19,20 +19,20 @@
     "@abp/ng.tenant-management.config": "^1.0.2",
     "@abp/ng.theme.shared": "^1.0.2",
     "@angular-builders/jest": "^8.2.0",
-    "@angular-devkit/build-angular": "~0.803.15",
-    "@angular-devkit/build-ng-packagr": "~0.803.15",
-    "@angular/animations": "~8.2.12",
+    "@angular-devkit/build-angular": "~0.803.18",
+    "@angular-devkit/build-ng-packagr": "~0.803.18",
+    "@angular/animations": "~8.2.13",
     "@angular/cdk": "^8.2.3",
-    "@angular/cli": "~8.3.15",
-    "@angular/common": "~8.2.12",
-    "@angular/compiler": "~8.2.12",
-    "@angular/compiler-cli": "~8.2.12",
-    "@angular/core": "~8.2.12",
-    "@angular/forms": "~8.2.12",
-    "@angular/language-service": "~8.2.12",
-    "@angular/platform-browser": "~8.2.12",
-    "@angular/platform-browser-dynamic": "~8.2.12",
-    "@angular/router": "~8.2.12",
+    "@angular/cli": "~8.3.18",
+    "@angular/common": "~8.2.13",
+    "@angular/compiler": "~8.2.13",
+    "@angular/compiler-cli": "~8.2.13",
+    "@angular/core": "~8.2.13",
+    "@angular/forms": "~8.2.13",
+    "@angular/language-service": "~8.2.13",
+    "@angular/platform-browser": "~8.2.13",
+    "@angular/platform-browser-dynamic": "~8.2.13",
+    "@angular/router": "~8.2.13",
     "@fortawesome/fontawesome-free": "^5.11.2",
     "@ng-bootstrap/ng-bootstrap": "^5.1.0",
     "@ngneat/spectator": "^4.5.0",

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn">
+<form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit>
   <div class="form-group">
     <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
     ><span> * </span
@@ -18,6 +18,7 @@
     buttonClass="btn btn-primary color-white"
     buttonType="submit"
     [loading]="inProgress"
+    [disabled]="form?.invalid"
     >{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >
 </form>

npm/ng-packs/packages/account/src/lib/components/login/login.component.html

@@ -5,7 +5,7 @@ <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
       {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
       <a class="text-decoration-none" routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
     </strong>
-    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
       <div class="form-group">
         <label for="login-input-user-name-or-email-address">{{
           'AbpAccount::UserNameOrEmailAddress' | abpLocalization

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html

@@ -1,4 +1,4 @@
-<form novalidate *ngIf="form" [formGroup]="form" (ngSubmit)="submit()">
+<form validateOnSubmit *ngIf="form" [formGroup]="form" (ngSubmit)="submit()">
   <div class="form-group">
     <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
     ><span> * </span
@@ -38,6 +38,7 @@
     iconClass="fa fa-check"
     buttonClass="btn btn-primary color-white"
     [loading]="inProgress"
+    [disabled]="form?.invalid || form?.pristine"
   >
     {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >

npm/ng-packs/packages/account/src/lib/components/register/register.component.html

@@ -5,7 +5,7 @@ <h4>{{ 'AbpAccount::Register' | abpLocalization }}</h4>
       {{ 'AbpAccount::AlreadyRegistered' | abpLocalization }}
       <a class="text-decoration-none" routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
     </strong>
-    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
       <div class="form-group">
         <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
         ><span> * </span

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html

@@ -25,7 +25,7 @@ <h6 class="m-0 d-inline-block">
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" size="md">
+<abp-modal size="md" [(visible)]="isModalVisible" [busy]="inProgress">
   <ng-template #abpHeader>
     <h5>Switch Tenant</h5>
   </ng-template>
@@ -44,8 +44,8 @@ <h5>Switch Tenant</h5>
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <button type="button" class="btn btn-primary" (click)="save()">
+    <abp-button buttonType="button" buttonClass="btn btn-primary" (click)="save()">
       <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
-    </button>
+    </abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts

@@ -3,31 +3,27 @@ import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { throwError } from 'rxjs';
-import { catchError, take } from 'rxjs/operators';
+import { catchError, take, finalize } from 'rxjs/operators';
 import snq from 'snq';
 import { AccountService } from '../../services/account.service';
 
 @Component({
   selector: 'abp-tenant-box',
-  templateUrl: './tenant-box.component.html'
+  templateUrl: './tenant-box.component.html',
 })
 export class TenantBoxComponent implements OnInit {
-  constructor(
-    private store: Store,
-    private toasterService: ToasterService,
-    private accountService: AccountService
-  ) {}
-
   tenant = {} as ABP.BasicItem;
 
   tenantName: string;
 
   isModalVisible: boolean;
 
+  inProgress: boolean;
+
+  constructor(private store: Store, private toasterService: ToasterService, private accountService: AccountService) {}
+
   ngOnInit() {
-    this.tenant =
-      this.store.selectSnapshot(SessionState.getTenant) ||
-      ({} as ABP.BasicItem);
+    this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
     this.tenantName = this.tenant.name || '';
   }
 
@@ -36,38 +32,33 @@ export class TenantBoxComponent implements OnInit {
   }
 
   save() {
-    if (this.tenant.name) {
+    if (this.tenant.name && !this.inProgress) {
+      this.inProgress = true;
       this.accountService
         .findTenant(this.tenant.name)
         .pipe(
+          finalize(() => (this.inProgress = false)),
           take(1),
           catchError(err => {
             this.toasterService.error(
-              snq(
-                () => err.error.error_description,
-                'AbpUi::DefaultErrorMessage'
-              ),
-              'AbpUi::Error'
+              snq(() => err.error.error_description, 'AbpUi::DefaultErrorMessage'),
+              'AbpUi::Error',
             );
             return throwError(err);
-          })
+          }),
         )
         .subscribe(({ success, tenantId }) => {
           if (success) {
             this.tenant = {
               id: tenantId,
-              name: this.tenant.name
+              name: this.tenant.name,
             };
             this.tenantName = this.tenant.name;
             this.isModalVisible = false;
           } else {
-            this.toasterService.error(
-              'AbpUiMultiTenancy::GivenTenantIsNotAvailable',
-              'AbpUi::Error',
-              {
-                messageLocalizationParams: [this.tenant.name]
-              }
-            );
+            this.toasterService.error('AbpUiMultiTenancy::GivenTenantIsNotAvailable', 'AbpUi::Error', {
+              messageLocalizationParams: [this.tenant.name],
+            });
             this.tenant = {} as ABP.BasicItem;
           }
           this.store.dispatch(new SetTenant(success ? this.tenant : null));

npm/ng-packs/packages/core/package.json

@@ -2,19 +2,19 @@
   "name": "@abp/ng.core",
   "version": "1.0.2",
   "dependencies": {
-    "@ngxs/router-plugin": "^3.5.0",
-    "@ngxs/storage-plugin": "^3.5.0",
-    "@ngxs/store": "^3.5.0",
-    "angular-oauth2-oidc": "^8.0.1",
+    "@ngxs/router-plugin": "^3.5.1",
+    "@ngxs/storage-plugin": "^3.5.1",
+    "@ngxs/store": "^3.5.1",
+    "angular-oauth2-oidc": "^8.0.4",
     "just-compare": "^1.3.0",
     "just-clone": "3.1.0",
     "snq": "^1.0.3"
   },
   "peerDependencies": {
-    "@angular/common": "~8.1.2",
-    "@angular/core": "~8.1.2",
-    "@angular/forms": "~8.1.2",
-    "@angular/router": "~8.1.2",
+    "@angular/common": ">=8.0.0 <9.0.0",
+    "@angular/core": ">=8.0.0 <9.0.0",
+    "@angular/forms": ">=8.0.0 <9.0.0",
+    "@angular/router": ">=8.0.0 <9.0.0",
     "rxjs": "~6.4.0"
   },
   "publishConfig": {

npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts

@@ -7,7 +7,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  Self
+  Self,
 } from '@angular/core';
 import { FormControl, FormGroup, FormGroupDirective } from '@angular/forms';
 import { fromEvent } from 'rxjs';
@@ -18,7 +18,7 @@ type Controls = { [key: string]: FormControl } | FormGroup[];
 
 @Directive({
   // tslint:disable-next-line: directive-selector
-  selector: 'form[ngSubmit][formGroup]'
+  selector: 'form[ngSubmit][formGroup]',
 })
 export class FormSubmitDirective implements OnInit, OnDestroy {
   @Input()
@@ -31,7 +31,7 @@ export class FormSubmitDirective implements OnInit, OnDestroy {
   constructor(
     @Self() private formGroupDirective: FormGroupDirective,
     private host: ElementRef<HTMLFormElement>,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
   ) {}
 
   ngOnInit() {
@@ -44,7 +44,7 @@ export class FormSubmitDirective implements OnInit, OnDestroy {
       .pipe(
         debounceTime(200),
         filter((key: KeyboardEvent) => key && key.key === 'Enter'),
-        takeUntilDestroy(this)
+        takeUntilDestroy(this),
       )
       .subscribe(() => {
         if (!this.executedNgSubmit) {
@@ -53,17 +53,6 @@ export class FormSubmitDirective implements OnInit, OnDestroy {
 
         this.executedNgSubmit = false;
       });
-
-    fromEvent(this.host.nativeElement, 'submit')
-      .pipe(
-        takeUntilDestroy(this),
-        filter(() => !this.notValidateOnSubmit && typeof this.notValidateOnSubmit !== 'string')
-      )
-      .subscribe(() => {
-        if (!this.executedNgSubmit) {
-          this.markAsDirty();
-        }
-      });
   }
 
   ngOnDestroy(): void {}

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -4,7 +4,7 @@ <h3>{{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}</h3
   </ng-template>
 
   <ng-template #abpBody>
-    <form *ngIf="form" (ngSubmit)="save()" [formGroup]="form">
+    <form *ngIf="form" (ngSubmit)="save()" [formGroup]="form" validateOnSubmit>
       <div
         class="row my-3"
         *ngFor="let feature of features$ | async; let i = index"
@@ -25,7 +25,7 @@ <h3>{{ 'AbpTenantManagement::Permission:ManageFeatures' | abpLocalization }}</h3
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()">
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid || modalBusy" (click)="save()">
       {{ 'AbpFeatureManagement::Save' | abpLocalization }}
     </abp-button>
   </ng-template>

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -76,6 +76,8 @@ export class FeatureManagementComponent {
   }
 
   save() {
+    if (this.modalBusy) return;
+
     this.modalBusy = true;
 
     let features = this.store.selectSnapshot(FeatureManagementState.getFeatures);

npm/ng-packs/packages/feature-management/src/lib/states/feature-management.state.ts

@@ -11,7 +11,7 @@ import { FeatureManagementService } from '../services/feature-management.service
 export class FeatureManagementState {
   @Selector()
   static getFeatures({ features }: FeatureManagement.State) {
-    return features;
+    return features || [];
   }
 
   constructor(private featureManagementService: FeatureManagementService) {}

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -106,7 +106,7 @@ <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocali
   </ng-template>
 
   <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()">
+    <form #formRef [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
       <div class="form-group">
         <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
         ><span> * </span>
@@ -133,7 +133,9 @@ <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocali
     <button type="button" class="btn btn-secondary" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="onClickSaveButton()">{{
+      'AbpIdentity::Save' | abpLocalization
+    }}</abp-button>
   </ng-template>
 </abp-modal>
 

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts

@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
+import { Component, TemplateRef, ViewChild, OnInit, ContentChild, ElementRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -40,8 +40,8 @@ export class RolesComponent implements OnInit {
 
   sortKey = '';
 
-  @ViewChild('modalContent', { static: false })
-  modalContent: TemplateRef<any>;
+  @ViewChild('formRef', { static: false, read: ElementRef })
+  formRef: ElementRef<HTMLFormElement>;
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
@@ -122,4 +122,8 @@ export class RolesComponent implements OnInit {
       .pipe(finalize(() => (this.loading = false)))
       .subscribe();
   }
+
+  onClickSaveButton() {
+    this.formRef.nativeElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+  }
 }

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -129,12 +129,14 @@ <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" (click)="save()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" (click)="save()" [disabled]="isDisabledSaveButton">{{
+      'AbpIdentity::Save' | abpLocalization
+    }}</abp-button>
   </ng-template>
 </abp-modal>
 
 <ng-template #tenantModalTemplate>
-  <form [formGroup]="tenantForm" (ngSubmit)="save()">
+  <form [formGroup]="tenantForm" (ngSubmit)="save()" validateOnSubmit>
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
@@ -145,7 +147,7 @@ <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
 </ng-template>
 
 <ng-template #connectionStringModalTemplate>
-  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()">
+  <form [formGroup]="defaultConnectionStringForm" (ngSubmit)="save()" validateOnSubmit>
     <label class="mt-2">
       <div class="form-group">
         <div class="custom-checkbox custom-control mb-2">
@@ -155,6 +157,7 @@ <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
             class="custom-control-input"
             formControlName="useSharedDatabase"
             autofocus
+            (ngModelChange)="onSharedDatabaseChange($event)"
           />
           <label for="useSharedDatabase" class="custom-control-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization