display fields errors

This commit is contained in:
Tykayn 2021-05-04 09:33:28 +02:00 committed by tykayn
parent d7eac8d56c
commit 9cd847be8f
11 changed files with 103 additions and 1 deletions

View File

@ -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 { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.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 { 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(localeEn, 'en-EN');
registerLocaleData(localeFr, 'fr-FR'); registerLocaleData(localeFr, 'fr-FR');
@ -70,5 +71,6 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
], ],
providers: [Title, TranslateService], providers: [Title, TranslateService],
bootstrap: [AppComponent], bootstrap: [AppComponent],
exports: [ErrorsListComponent],
}) })
export class AppModule {} export class AppModule {}

View File

@ -18,6 +18,7 @@ import { BaseConfigComponent } from './form/base-config/base-config.component';
import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component'; import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
import { CalendarModule } from 'primeng'; import { CalendarModule } from 'primeng';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppModule } from '../../app.module';
@NgModule({ @NgModule({
declarations: [ declarations: [

View File

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

View File

@ -53,4 +53,12 @@ export class BaseConfigComponent {
this.utilitiesService.makeUuid().substr(0, 12), this.utilitiesService.makeUuid().substr(0, 12),
}); });
} }
getErrorMessage(fieldControl) {
return fieldControl.hasError('required')
? 'You must enter a value'
: fieldControl.hasError('email')
? 'Not a valid email'
: '';
}
} }

View File

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

View File

@ -91,7 +91,7 @@ export class FormComponent implements OnInit {
expiresDaysDelay: [60, [Validators.required, Validators.min(1)]], expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]], maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]],
allowComments: [true, [Validators.required]], allowComments: [true, [Validators.required]],
password: [this.pollUtilitiesService.makeUuid(), [Validators.required]], password: ['', []],
dateCreated: [creationDate, [Validators.required]], dateCreated: [creationDate, [Validators.required]],
hasSeveralHours: [false, [Validators.required]], hasSeveralHours: [false, [Validators.required]],
hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]], hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
@ -138,6 +138,8 @@ export class FormComponent implements OnInit {
expiresDaysDelay: 60, expiresDaysDelay: 60,
maxCountOfAnswers: 150, maxCountOfAnswers: 150,
allowNewDateTime: false, allowNewDateTime: false,
startDateInterval: new Date(),
endDateInterval: new Date(),
comments: [], comments: [],
choices: [ choices: [
{ {

View File

@ -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>

View File

@ -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();
});
});

View File

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

View File

@ -26,6 +26,7 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
import { CopyTextComponent } from './components/ui/copy-text/copy-text.component'; import { CopyTextComponent } from './components/ui/copy-text/copy-text.component';
import { ErasableInputComponent } from './components/ui/erasable-input/erasable-input.component'; import { ErasableInputComponent } from './components/ui/erasable-input/erasable-input.component';
import { WipTodoComponent } from './components/ui/wip-todo/wip-todo.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 = [ const COMPONENTS = [
ChoiceDetailsComponent, ChoiceDetailsComponent,
@ -38,6 +39,7 @@ const COMPONENTS = [
ThemeSelectorComponent, ThemeSelectorComponent,
CopyTextComponent, CopyTextComponent,
ErasableInputComponent, ErasableInputComponent,
ErrorsListComponent,
WipTodoComponent, WipTodoComponent,
]; ];