validation

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

@@ -4,11 +4,13 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { CommandModalDirective } from './directives/command-modal.directive';
 import { CommandModalComponent } from './command-modal/command-modal.component';
 import { InputValidatorDirective } from './directives/input-validator.directive';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     CommonModule,
-    ModalModule.forRoot()
+    ModalModule.forRoot(),
+    FormsModule
   ],
   declarations: [CommandModalDirective, CommandModalComponent, InputValidatorDirective],
   exports: [CommandModalDirective]

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

@@ -7,13 +7,12 @@
 <div class="modal-body">
     <ng-container [ngTemplateOutlet]="template"
         [ngTemplateOutletContext]="{ $implicit: commandModel, loading: loading }"></ng-container>
+    <div *ngIf="validationMessage" 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()"
-        [attr.disabled]="loading">{{ cancelText }}</button>
-    <button type="button" class="btn btn-primary" (click)="attemptSave()"
-        [attr.disabled]="loading">{{ commandText }}</button>
-
+        [disabled]="loading">{{ cancelText }}</button>
+    <button type="button" class="btn btn-primary" [disabled]="loading" (click)="onSubmit()">{{ commandText }}</button>
     <br>
 
     <div class="progress" style="width: 100%" *ngIf="loading">
@@ -21,4 +20,5 @@
             aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
     </div>
 
-</div>
+</div>
+

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

@@ -0,0 +1,3 @@
+.field-error{
+    border: 1px solid red;
+}

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

@@ -3,6 +3,7 @@ import { IDataSource } from '@poweredsoft/data';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { finalize} from 'rxjs/operators';
 import { Subscription } from 'rxjs';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'psbx-command-modal',
@@ -20,6 +21,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
   loading: boolean;
   commandText: string;
   cancelText: string;
+  form:NgForm;
+  validationMessage:string ;
 
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
@@ -33,16 +36,26 @@ export class CommandModalComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
-      
+      if (message.type != 'info')
+        this.validationMessage = message.message;
     });
 
-    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
-      console.log(validatorErrors);
+    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {      
+      let validationSummary = '';
+      Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
+        const errors = validatorErrors.errors[property].join('\n');
+        validationSummary += errors + '\n';
+      });
+      this.validationMessage = validationSummary.trim();
     });
   }
 
-  attemptSave() {
+  onSubmit(){
+    
+
     this.loading = true;
+    this.validationMessage = null;
+
     this.dataSource.executeCommandByName(this.command, this.commandModel)
       .pipe(
         finalize(() => {
@@ -59,4 +72,8 @@ export class CommandModalComponent implements OnInit, OnDestroy {
       });
   }
 
+  attemptSave() {
+    
+  }
+
 }

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

@@ -11,17 +11,15 @@
         <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ $implicit: modelForm, loading: loading }">
         </ng-container>
 
-        <div *ngIf="errorMessage" class="alert alert-danger mt-2">
-            {{ errorMessage }}
-        </div>
+        <div *ngIf="errorMessage" class="alert alert-danger mt-2" style="white-space: pre-wrap">{{ errorMessage }}</div>
     </div>
   
     
     
     <div class="modal-footer">
         <button type="button" class="btn btn-light" (click)="modalRef.hide()"
-            [attr.disabled]="loading">{{ cancelText }}</button>
-        <button type="button" class="btn btn-primary" (click)="attemptSave()" [attr.disabled]="loading">{{commandText}}</button>
+            [disabled]="loading">{{ cancelText }}</button>
+        <button type="button" class="btn btn-primary" (click)="attemptSave()" [disabled]="loading">{{commandText}}</button>
         <br>
     
         <div class="progress" style="width: 100%" *ngIf="loading">

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

@@ -23,17 +23,16 @@ export class FormGroupCommandModalComponent implements OnInit {
   commandText: string;
   cancelText: string;
   errorMessage: string;
-  commandModel:any;
+  commandModel:any; 
+  
   private _notifyMessage: Subscription;
   private _validationError: Subscription;
 
   constructor(public modalRef: BsModalRef) { }
 
   ngOnDestroy(): void {
-    /*
     this._notifyMessage.unsubscribe();
     this._validationError.unsubscribe();
-    */
   }
 
   ngOnInit(): void {
@@ -41,19 +40,24 @@ export class FormGroupCommandModalComponent implements OnInit {
     // this._notifyMessage = this.dataSource.notifyMessage$.subscribe(message => {
       
     // });
-
-    // this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {
-    //   console.log(validatorErrors);
-    // });
+   
+    this._validationError = this.dataSource.validationError$.subscribe(validatorErrors => {      
+      let validationSummary = '';
+      Object.getOwnPropertyNames(validatorErrors.errors).forEach(property => {
+        const errors = validatorErrors.errors[property].join('\n');
+        validationSummary += errors + '\n';
+      });
+      this.errorMessage = validationSummary.trim();
+    });
   }
 
   attemptSave() {
-    this.errorMessage = null;
-    if (!this.modelForm.valid)
-    {
-      this.errorMessage = 'Form is not valid, please enter all required fields';
-      return;
-    }
+    // this.errorMessage = null;
+    // if (!this.modelForm.valid)
+    // {
+    //   this.errorMessage = 'Form is not valid, please enter all required fields';      
+    //   return;
+    // }
 
     const finalModel = this.modelForm.value;  
     if(this.commandModel.id)

projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html

@@ -1,3 +1,10 @@
-<div class="spinner-border" role="status">
-    <span class="sr-only">Loading...</span>
+<div class="center">
+    <div class="spinner-grow text-primary" role="status">
+    </div>
+    <div class="spinner-grow text-secondary" role="status">
+    </div>
+    <div class="spinner-grow text-primary" role="status">
+    </div>
+    <div class="spinner-grow text-secondary" role="status">
+    </div>
 </div>

projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.scss

@@ -0,0 +1,6 @@
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }