From 1cd6e16ce4e39f22a6b338574dda1629eb51ce80 Mon Sep 17 00:00:00 2001 From: Yubing325 <35515298+Yubing325@users.noreply.github.com> Date: Wed, 17 Jun 2020 10:57:57 -0500 Subject: [PATCH] validation --- .../lib/command-modal/command-modal.module.ts | 4 +- .../command-modal.component.html | 10 ++-- .../command-modal.component.scss | 3 ++ .../command-modal/command-modal.component.ts | 25 +++++++-- .../form-group-command-modal.component.html | 8 ++- .../form-group-command-modal.component.ts | 30 ++++++----- .../spinner/spinner/spinner.component.html | 11 +++- .../spinner/spinner/spinner.component.scss | 6 +++ .../src/lib/data-grid/data-grid.module.ts | 10 +++- .../data-grid/data-grid.component.html | 26 +++++++--- .../data-grid/data-grid.component.ts | 51 +++++++++++++++---- .../directives/data-grid-loader.directive.ts | 4 +- .../command-modal-demo.component.html | 11 ++-- .../pagination/pagination-demo.component.html | 47 ++++++++++++++--- .../pagination/pagination-demo.component.scss | 3 ++ 15 files changed, 187 insertions(+), 62 deletions(-) diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts index 410c684..0940f87 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal.module.ts +++ b/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] diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html index e4f2e07..2c11963 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.html @@ -7,13 +7,12 @@
+
{{validationMessage}}
- - + [disabled]="loading">{{ cancelText }} +
@@ -21,4 +20,5 @@ aria-valuemin="0" aria-valuemax="100" style="width: 100%">
- \ No newline at end of file + + diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss index e69de29..f7e771a 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.scss @@ -0,0 +1,3 @@ +.field-error{ + border: 1px solid red; +} \ No newline at end of file diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts index 84c892e..4408a68 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/command-modal/command-modal/command-modal.component.ts +++ b/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() { + + } + } diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html index d640079..d7d60bf 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.html @@ -11,17 +11,15 @@ -
- {{ errorMessage }} -
+
{{ errorMessage }}
- + [disabled]="loading">{{ cancelText }} +
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts index c77e1d9..fd1766f 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts +++ b/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) diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html index 54b581b..1321fbd 100644 --- a/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html +++ b/projects/poweredsoft/ngx-bootstrap/src/lib/spinner/spinner/spinner.component.html @@ -1,3 +1,10 @@ -