indiquer champ en erreur, scroll bouton vers le premier

This commit is contained in:
Tykayn 2021-05-18 11:02:50 +02:00 committed by tykayn
parent 7ef4e4d4a4
commit 11a0245890
3 changed files with 40 additions and 6 deletions

View File

@ -9,9 +9,14 @@
<strong class="marged has-background-warning total-errors" *ngIf="form && totalErrors"> <strong class="marged has-background-warning total-errors" *ngIf="form && totalErrors">
{{ totalErrors }} erreurs de validation {{ totalErrors }} erreurs de validation
</strong> </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 }} {{ totalErrors }}
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
{{ firstErrorId }}
</strong> </strong>
<ul> <ul>

View File

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

View File

@ -78,7 +78,7 @@ option {
-moz-appearance: none; -moz-appearance: none;
border-radius: 0; border-radius: 0;
background-color: transparent; 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; padding-right: 2.5rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 9px 8px; background-size: 9px 8px;