validation error component in cdk.

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html

@@ -6,8 +6,8 @@
 </div>
 <div class="modal-body">
     <ng-container [ngTemplateOutlet]="template"
-        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading }"></ng-container>
+        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
-    <div *ngIf="hasError" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
+    <div *ngIf="hasError && !disableValidationSummary" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
 </div>
 <div class="modal-footer">
     <button type="button" class="btn btn-light" (click)="modalRef.hide()"

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts

@@ -23,6 +23,7 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   cancelText: string;
   form:NgForm;
   validationMessage:string ;
+  disableValidationSummary: boolean;
   btnClass:string;
   successEmitter: EventEmitter<any>; 
   hasError: boolean;

projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/directives/command-modal.directive.ts

@@ -22,6 +22,7 @@ export class CommandModalDirective {
   @Input() animated: boolean;
   @Input() btnClass:string;
   @Input() modalSize: string;
+  @Input() disableValidationSummary: boolean;
 
   @Output() success: EventEmitter<any> = new EventEmitter<any>();
 
@@ -37,6 +38,7 @@ export class CommandModalDirective {
         commandModel: commandModel,
         template: this.template,
         title: this.commandTitle,
+        disableValidationSummary: this.disableValidationSummary === undefined ? false : this.disableValidationSummary,
         refreshOnSuccess: this.refreshOnSuccess === undefined ? true : this.refreshOnSuccess,
         commandText: this.commandText || 'OK',
         cancelText: this.cancelText || 'Cancel',

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.html

@@ -0,0 +1,4 @@
+<ng-container *ngFor="let err of latestErrors; let isLast=last">
+    {{ err }}
+    <br *ngIf="!isLast">
+</ng-container>

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'ps-ds-validation-error',
+  templateUrl: './ds-validation-error.component.html',
+  styleUrls: ['./ds-validation-error.component.scss']
+})
+export class DsValidationErrorComponent implements OnInit, OnDestroy {
+
+  @Input() dataSource: IDataSource<any>;
+  @Input() field: string;
+  validationErrorsSub: Subscription;
+  latestErrors: string[] = [];
+
+  constructor() { }
+
+  ngOnDestroy(): void {
+    this.validationErrorsSub?.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this.validationErrorsSub = this.dataSource.validationError$.subscribe(validationErrors => {
+      this.latestErrors = Object.keys(validationErrors.errors)
+        .filter(t => t.toLowerCase() == this.field?.toLowerCase())
+        .reduce<string[]>((prev, current) => {
+          return prev.concat(validationErrors.errors[current]);
+        }, []);
+    });
+
+  }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/ds-validation-error/ds-validation-error.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DsValidationErrorComponent } from './ds-validation-error.component';
+
+
+
+@NgModule({
+  declarations: [DsValidationErrorComponent],
+  imports: [
+    CommonModule
+  ],
+  exports: [DsValidationErrorComponent]
+})
+export class DsValidationErrorModule { }

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -22,4 +22,8 @@ export * from './lib/list-view/directives/list-view-footer.directive';
 export * from './lib/list-view/directives/list-view-seperator.directive';
 
 export * from './lib/ds-search/ds-search.module';
-export * from './lib/ds-search/ds-search.component';
+export * from './lib/ds-search/ds-search.component';
+
+// ds validation
+export * from './lib/ds-validation-error/ds-validation-error.module';
+export * from './lib/ds-validation-error/ds-validation-error.component';

src/app/command-modal-demo/command-modal-demo.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CommandModalDemoComponent } from './command-modal-demo/command-modal-demo.component';
 import { CommandModalDemoRoutingModule } from './command-modal-demo-routing.module';
-import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
+import { DataGridModule, DsValidationErrorModule } from '@poweredsoft/ngx-cdk-ui';
 
 import {FormsModule} from '@angular/forms';
 import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule } from '@poweredsoft/ngx-bootstrap';
@@ -11,6 +11,7 @@ import { CommandModalModule, PaginationModule, ConfirmModalModule,CommandModule
   imports: [
     CommonModule,
     CommandModalDemoRoutingModule,
+    DsValidationErrorModule,
     DataGridModule,
     CommandModalModule,
     FormsModule,

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -6,6 +6,7 @@
     <ng-container *psDataGridHeader>
         <button class="btn-primary btn" psbxCommandModal 
         commandTitle="Adding a new merchant" commandText="Add"
+        
             [dataSource]="merchantDataSource" command="addMerchant" 
             [template]="theModal">Create a new record</button>
 
@@ -57,17 +58,22 @@
 
 <ng-template #changeName let-command let-loading="loading">
     New Name
-    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">
+    <input type="text" [attr.disabled]="loading" [(ngModel)]="command.name" placeholder="Entermerchant new name" class="form-control">    
     New Address
     <input type="text" required [attr.disabled]="loading" [(ngModel)]="command.address" placeholder="Entermerchant new Address" class="form-control">
+ 
 </ng-template>
 
-<ng-template #theModal let-command let-loading="loading">
+<ng-template #theModal let-command let-loading="loading" let-ds="dataSource">
     <form   >
         Name
         <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
+        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="name">
+        </ps-ds-validation-error>
         Address
         <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
+        <ps-ds-validation-error class="text-danger d-block" [dataSource]="ds" field="address">
+        </ps-ds-validation-error>
         Date
         <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
     </form>