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
index ffcf7ba9..601c1541 100644
--- 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
@@ -9,9 +9,14 @@
{{ totalErrors }} erreurs de validation
-
+
{{ totalErrors }}
+ {{ firstErrorId }}
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
index 9345093e..42b24390 100644
--- 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
@@ -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);
+ }
+ }
}
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 122aad96..c04702a5 100644
--- a/src/styles/partials/_forms.scss
+++ b/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;