From 9cd847be8f099509a55518b092b1d0645c1967ee Mon Sep 17 00:00:00 2001 From: Tykayn Date: Tue, 4 May 2021 09:33:28 +0200 Subject: [PATCH] display fields errors --- src/app/app.module.ts | 2 + .../administration/administration.module.ts | 1 + .../base-config/base-config.component.html | 3 ++ .../form/base-config/base-config.component.ts | 8 ++++ .../administration/form/form.component.html | 1 + .../administration/form/form.component.ts | 4 +- .../errors-list/errors-list.component.html | 15 +++++++ .../errors-list/errors-list.component.scss | 0 .../errors-list/errors-list.component.spec.ts | 24 ++++++++++ .../form/errors-list/errors-list.component.ts | 44 +++++++++++++++++++ src/app/shared/shared.module.ts | 2 + 11 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/app/features/shared/components/ui/form/errors-list/errors-list.component.html create mode 100644 src/app/features/shared/components/ui/form/errors-list/errors-list.component.scss create mode 100644 src/app/features/shared/components/ui/form/errors-list/errors-list.component.spec.ts create mode 100644 src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1fb42f4d..c691b1e0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -27,6 +27,7 @@ import { CguComponent } from './features/shared/components/ui/static-pages/cgu/c import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component'; import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component'; import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component'; +import { ErrorsListComponent } from './features/shared/components/ui/form/errors-list/errors-list.component'; registerLocaleData(localeEn, 'en-EN'); registerLocaleData(localeFr, 'fr-FR'); @@ -70,5 +71,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader { ], providers: [Title, TranslateService], bootstrap: [AppComponent], + exports: [ErrorsListComponent], }) export class AppModule {} diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index 5a3b196b..307c91ea 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -18,6 +18,7 @@ import { BaseConfigComponent } from './form/base-config/base-config.component'; import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component'; import { CalendarModule } from 'primeng'; import { DragDropModule } from '@angular/cdk/drag-drop'; +import { AppModule } from '../../app.module'; @NgModule({ declarations: [ diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html index 77973bbb..0159b726 100644 --- a/src/app/features/administration/form/base-config/base-config.component.html +++ b/src/app/features/administration/form/base-config/base-config.component.html @@ -54,6 +54,9 @@ > + {{ + getErrorMessage(form.controls.creatorEmail) + }}
Ce champ est requis
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts index 24a4063f..c3abebe2 100644 --- a/src/app/features/administration/form/base-config/base-config.component.ts +++ b/src/app/features/administration/form/base-config/base-config.component.ts @@ -53,4 +53,12 @@ export class BaseConfigComponent { this.utilitiesService.makeUuid().substr(0, 12), }); } + + getErrorMessage(fieldControl) { + return fieldControl.hasError('required') + ? 'You must enter a value' + : fieldControl.hasError('email') + ? 'Not a valid email' + : ''; + } } diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 02f6feb8..df01c80a 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -1,6 +1,7 @@
+

diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts index 2697985c..7407057a 100644 --- a/src/app/features/administration/form/form.component.ts +++ b/src/app/features/administration/form/form.component.ts @@ -91,7 +91,7 @@ export class FormComponent implements OnInit { expiresDaysDelay: [60, [Validators.required, Validators.min(1)]], maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]], allowComments: [true, [Validators.required]], - password: [this.pollUtilitiesService.makeUuid(), [Validators.required]], + password: ['', []], dateCreated: [creationDate, [Validators.required]], hasSeveralHours: [false, [Validators.required]], hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]], @@ -138,6 +138,8 @@ export class FormComponent implements OnInit { expiresDaysDelay: 60, maxCountOfAnswers: 150, allowNewDateTime: false, + startDateInterval: new Date(), + endDateInterval: new Date(), comments: [], choices: [ { diff --git a/src/app/features/shared/components/ui/form/errors-list/errors-list.component.html b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.html new file mode 100644 index 00000000..07007cb4 --- /dev/null +++ b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.html @@ -0,0 +1,15 @@ +
+

+ Validation +

+ statut: {{ form.status }} + + {{ totalErrors }} erreurs de validation + + +
    +
  • + {{ m }} +
    • +
+
diff --git a/src/app/features/shared/components/ui/form/errors-list/errors-list.component.scss b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/shared/components/ui/form/errors-list/errors-list.component.spec.ts b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.spec.ts new file mode 100644 index 00000000..496d8166 --- /dev/null +++ b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ErrorsListComponent } from './errors-list.component'; + +describe('ErrorsListComponent', () => { + let component: ErrorsListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ErrorsListComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ErrorsListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts new file mode 100644 index 00000000..24f16ae1 --- /dev/null +++ b/src/app/features/shared/components/ui/form/errors-list/errors-list.component.ts @@ -0,0 +1,44 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FormGroup, ValidationErrors } from '@angular/forms'; + +@Component({ + selector: 'app-errors-list', + templateUrl: './errors-list.component.html', + styleUrls: ['./errors-list.component.scss'], +}) +export class ErrorsListComponent implements OnInit { + @Input() form: FormGroup; + public totalErrors = 0; + public messages = []; + + ngOnInit() { + this.form.valueChanges.subscribe((data) => { + this.getFormValidationErrors(); + }); + } + + getFormValidationErrors(): void { + // console.log('%c ==>> Validation Errors: ', 'color: red; font-weight: bold; font-size:25px;'); + + let totalErrors = 0; + this.messages = []; + + Object.keys(this.form.controls).forEach((key) => { + const controlErrors: ValidationErrors = this.form.get(key).errors; + if (controlErrors != null) { + console.log('controlErrors', controlErrors); + totalErrors++; + Object.keys(controlErrors).forEach((keyError) => { + const message = '' + key + ', ' + keyError + ''; + console.log( + 'Key control: ' + key + ', keyError: ' + keyError + ', err value: ' + controlErrors[keyError] + ); + this.messages.push(message); + }); + } + }); + this.totalErrors = totalErrors; + + console.log('Number of errors: ', totalErrors); + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 1ecfed1c..d8bdcb38 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -26,6 +26,7 @@ import { SpinnerComponent } from './components/spinner/spinner.component'; import { CopyTextComponent } from './components/ui/copy-text/copy-text.component'; import { ErasableInputComponent } from './components/ui/erasable-input/erasable-input.component'; import { WipTodoComponent } from './components/ui/wip-todo/wip-todo.component'; +import { ErrorsListComponent } from '../features/shared/components/ui/form/errors-list/errors-list.component'; const COMPONENTS = [ ChoiceDetailsComponent, @@ -38,6 +39,7 @@ const COMPONENTS = [ ThemeSelectorComponent, CopyTextComponent, ErasableInputComponent, + ErrorsListComponent, WipTodoComponent, ];