feature(theme-shared): import ngx-validate

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

@@ -3,7 +3,7 @@
     <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
   </ng-template>
   <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn">
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
         ><span> * </span
@@ -13,13 +13,10 @@
         <label for="new-password">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label
         ><span> * </span><input type="password" id="new-password" class="form-control" formControlName="newPassword" />
       </div>
-      <div class="form-group" [class.is-invalid]="form.errors?.passwordMismatch">
+      <div class="form-group">
         <label for="confirm-new-password">{{ 'AbpIdentity::DisplayName:NewPasswordConfirm' | abpLocalization }}</label
         ><span> * </span
         ><input type="password" id="confirm-new-password" class="form-control" formControlName="repeatNewPassword" />
-        <div *ngIf="form.errors?.passwordMismatch" class="invalid-feedback">
-          {{ 'AbpIdentity::Identity.PasswordConfirmationFailed' | abpLocalization }}
-        </div>
       </div>
     </form>
   </ng-template>
@@ -27,6 +24,8 @@
     <button type="button" class="btn btn-secondary color-white" #abpClose>
       {{ 'AbpIdentity::Cancel' | abpLocalization }}
     </button>
-    <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="onSubmit()">{{ 'AbpIdentity::Save' | abpLocalization }}</abp-button>
+    <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="onSubmit()">{{
+      'AbpIdentity::Save' | abpLocalization
+    }}</abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/theme-shared/src/lib/components/change-password/change-password.component.ts

@@ -11,7 +11,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { comparePasswords } from '@ngx-validate/core';
+import { comparePasswords, Validation } from '@ngx-validate/core';
 import { Store } from '@ngxs/store';
 import snq from 'snq';
 import { finalize } from 'rxjs/operators';
@@ -19,6 +19,8 @@ import { ToasterService } from '../../services/toaster.service';
 
 const { minLength, required } = Validators;
 
+const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
+
 @Component({
   selector: 'abp-change-password',
   templateUrl: './change-password.component.html',
@@ -46,6 +48,12 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
 
   modalBusy: boolean = false;
 
+  mapErrorsFn: Validation.MapErrorsFn = function(errors, groupErrors, control) {
+    if (PASSWORD_FIELDS.indexOf(control.name) < 0) return errors;
+
+    return errors.concat(groupErrors.filter(({ key }) => key === 'passwordMismatch'));
+  };
+
   constructor(private fb: FormBuilder, private store: Store, private toasterService: ToasterService) {}
 
   ngOnInit(): void {
@@ -56,7 +64,7 @@ export class ChangePasswordComponent implements OnInit, OnChanges {
         repeatNewPassword: ['', required],
       },
       {
-        validators: [comparePasswords(['newPassword', 'repeatNewPassword'])],
+        validators: [comparePasswords(PASSWORD_FIELDS)],
       },
     );
   }

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -18,6 +18,7 @@ import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
 import { chartJsLoaded$ } from './utils/widget-utils';
 import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 export function appendScript(injector: Injector) {
   const fn = function() {
@@ -40,7 +41,7 @@ export function appendScript(injector: Injector) {
 }
 
 @NgModule({
-  imports: [CoreModule, ToastModule],
+  imports: [CoreModule, ToastModule, NgxValidateCoreModule],
   declarations: [
     BreadcrumbComponent,
     ButtonComponent,