display fields errors

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 {}

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: [

src/app/features/administration/form/base-config/base-config.component.html

@@ -54,6 +54,9 @@
 			>
 				<i class="fa fa-close"></i>
 			</button>
+			<mat-error *ngIf="form.controls.creatorEmail.invalid">{{
+				getErrorMessage(form.controls.creatorEmail)
+			}}</mat-error>
 			<div class="hint" *ngIf="form.controls.creatorEmail.errors">
 				Ce champ est requis
 			</div>

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'
+			: '';
+	}
 }

src/app/features/administration/form/form.component.html

@@ -1,6 +1,7 @@
 <div class="admin-form padded">
 	<div class="container is-max-widescreen">
 		<form [formGroup]="form">
+			<app-errors-list [form]="form"></app-errors-list>
 			<header class="columns">
 				<div class="column">
 					<h1 class="title is-2">

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: [
 				{

src/app/features/shared/components/ui/form/errors-list/errors-list.component.html

@@ -0,0 +1,15 @@
+<div class="validation-error-list" [ngClass]="{ 'has-background-warning': totalErrors > 0 }">
+	<h1 class="title is-1">
+		Validation
+	</h1>
+	<span class="status"> statut: {{ form.status }} </span>
+	<span class="has-background-warning total-errors" *ngIf="form && getFormValidationErrors()">
+		{{ totalErrors }} erreurs de validation
+	</span>
+
+	<ul>
+		<li *ngFor="let m of messages">
+			{{ m }}
+		</li>
+	</ul>
+</div>

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<ErrorsListComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [ErrorsListComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(ErrorsListComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

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);
+	}
+}

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,
 ];