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>
-    <div *ngIf="hasError" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{validationMessage}}</div>
+        [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading, dataSource: dataSource }"></ng-container>
+    <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';