indiquer champ en erreur, scroll bouton vers le premier

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

@@ -9,9 +9,14 @@
 	<strong class="marged has-background-warning total-errors" *ngIf="form && totalErrors">
 		{{ totalErrors }} erreurs de validation
 	</strong>
-	<strong class="marged has-background-warning total-errors fixed-hint" *ngIf="form && totalErrors">
+	<strong
+		class="marged has-background-warning total-errors fixed-hint clickable"
+		*ngIf="form && totalErrors && form.touched"
+		(click)="scrollToFirstError()"
+	>
 		{{ totalErrors }}
 		<i class="fa fa-warning"></i>
+		{{ firstErrorId }}
 	</strong>
 
 	<ul>

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

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
 import { FormGroup, ValidationErrors } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
 	selector: 'app-errors-list',
@@ -9,8 +10,11 @@ import { FormGroup, ValidationErrors } from '@angular/forms';
 export class ErrorsListComponent implements OnInit {
 	@Input() form: FormGroup;
 	public totalErrors = 0;
+	public firstErrorId = '';
 	public messages = [];
 
+	constructor(@Inject(DOCUMENT) private document: any) {}
+
 	ngOnInit() {
 		this.form.valueChanges.subscribe((data) => {
 			this.getFormValidationErrors();
@@ -23,32 +27,57 @@ export class ErrorsListComponent implements OnInit {
 
 		let totalErrors = 0;
 		this.messages = [];
+		let firstErrorId = '';
 
 		Object.keys(this.form.controls).forEach((key) => {
 			const theKey = this.form.get(key);
 			const invalidData = theKey.invalid;
+
 			if (invalidData) {
-				totalErrors++;
-				console.log('key', key, invalidData);
-				this.messages.push('' + key + ' est invalide');
+				if (!firstErrorId) {
+					firstErrorId = key;
+				}
+				// totalErrors++;
+				// this.messages.push('' + key + ' est invalide');
 			}
 			const controlErrors: ValidationErrors = theKey.errors;
+
 			if (controlErrors != null) {
 				console.log('controlErrors', controlErrors);
 				totalErrors++;
 				Object.keys(controlErrors).forEach((keyError) => {
+					if (!firstErrorId) {
+						firstErrorId = key;
+					}
 					const message = '' + key + ', ' + keyError + '';
 					console.log(
 						'Key control: ' + key + ', keyError: ' + keyError + ', err value: ' + controlErrors[keyError]
 					);
+
 					this.messages.push(message);
 				});
 			}
 		});
 		this.totalErrors = totalErrors;
+		this.firstErrorId = firstErrorId;
 
 		if (totalErrors) {
 			console.log('Number of errors: ', totalErrors);
 		}
 	}
+
+	scrollToFirstError() {
+		if (this.firstErrorId) {
+			const foundErrorField = this.document.querySelector('#' + this.firstErrorId);
+			if (foundErrorField) {
+				const offsetTop = foundErrorField.offsetTop;
+
+				scroll({
+					top: offsetTop,
+					behavior: 'smooth',
+				});
+			}
+			console.log('foundErrorField', foundErrorField);
+		}
+	}
 }

src/styles/partials/_forms.scss

@@ -78,7 +78,7 @@ option {
 	-moz-appearance: none;
 	border-radius: 0;
 	background-color: transparent;
-	background-image: url('assets/img/fleche_bas.svg') !important;
+	//background-image: url('assets/img/fleche_bas.svg') !important;
 	padding-right: 2.5rem;
 	background-repeat: no-repeat;
 	background-size: 9px 8px;