From 396fd34a213dc59ec949c9a07de5631a05678564 Mon Sep 17 00:00:00 2001 From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com> Date: Mon, 25 Jan 2021 13:25:52 +0100 Subject: [PATCH] fix(form) : add custom validator + fix Hourpicker validation --- src/app/form/form.component.ts | 8 ++-- .../hour-picker/hour-picker.component.html | 4 +- .../hour-picker/hour-picker.component.ts | 46 +++++++++++-------- src/app/shared/validator/form.ts | 13 +++++- 4 files changed, 47 insertions(+), 24 deletions(-) diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 7bad60527..3b4aea128 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -228,8 +228,8 @@ export class FormComponent implements OnInit { } private createTime(time: Time): FormGroup { return new FormGroup({ - openning: new FormControl(time.openning), - closing: new FormControl(time.closing), + openning: new FormControl(time.openning, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')), + closing: new FormControl(time.closing, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')), }); } @@ -302,7 +302,8 @@ export class FormComponent implements OnInit { }; this.pagesValidation[5] = { valid: this.getStructureControl('structureType').valid }; this.pagesValidation[6] = { valid: this.getStructureControl('accessModality').valid }; - this.pagesValidation[7] = { valid: true }; + this.pagesValidation[7] = { valid: this.hoursForm.valid }; + this.updatePageValid(); } @@ -342,5 +343,6 @@ export class FormComponent implements OnInit { } public updateHours(form: FormGroup) { this.hoursForm = form; + this.setValidationsForm(); } } diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html index 7916e9fee..0a509ad52 100644 --- a/src/app/shared/components/hour-picker/hour-picker.component.html +++ b/src/app/shared/components/hour-picker/hour-picker.component.html @@ -52,13 +52,13 @@ <div>de</div> <div class="input-container"> - <input type="time" [(ngModel)]="hour.start" (change)="checkHoursValid()" [disabled]="isEditMode" /> + <input type="time" [(ngModel)]="hour.start" (change)="submitForm()" [disabled]="isEditMode" /> </div> <div>à</div> <div class="input-container"> - <input type="time" [(ngModel)]="hour.end" (change)="checkHoursValid()" [disabled]="isEditMode" /> + <input type="time" [(ngModel)]="hour.end" (change)="submitForm()" [disabled]="isEditMode" /> </div> <div> diff --git a/src/app/shared/components/hour-picker/hour-picker.component.ts b/src/app/shared/components/hour-picker/hour-picker.component.ts index 03fefa234..488eed19b 100644 --- a/src/app/shared/components/hour-picker/hour-picker.component.ts +++ b/src/app/shared/components/hour-picker/hour-picker.component.ts @@ -4,6 +4,7 @@ import * as _ from 'lodash'; import { Day } from '../../../models/day.model'; import { Time } from '../../../models/time.model'; import { WeekDayEnum } from '../../enum/weekDay.enum'; +import { CheckHours } from '../../validator/form'; @Component({ selector: 'app-hour-picker', @@ -15,7 +16,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy { @Input() structureInput: FormGroup; @Input() isEditMode: boolean; - @Output() updateHoursError = new EventEmitter<{ badHoursFormat: boolean }>(); + @Output() updateFormError = new EventEmitter<boolean>(); @Output() updateForm = new EventEmitter<FormGroup>(); private copiedDay: any; @@ -94,17 +95,32 @@ export class HourPickerComponent implements OnChanges, OnDestroy { element.active = day.open; element.hours = day.time .map((hour: Time) => { - if (hour.openning) { + if (hour.openning && hour.closing) { return { start: this.formatNumericalHours(hour.openning), end: this.formatNumericalHours(hour.closing), error: null, }; + } else { + if (hour.openning) { + return { + start: this.formatNumericalHours(hour.openning), + end: '', + error: 'incomplete', + }; + } else { + return { + start: '', + end: this.formatNumericalHours(hour.closing), + error: 'incomplete', + }; + } } }) .filter((item) => item); } }); + this.checkHoursValid(); this.structure.hours = this.structureHoursDefault; } @@ -202,10 +218,9 @@ export class HourPickerComponent implements OnChanges, OnDestroy { public toggleOpenDay(day: any, value: any): void { day.open = value; if (!value) { - day.hours = [{ start: '', end: '', error: 'incomplete' }]; + day.hours = []; } - - this.checkHoursValid(); + this.submitForm(); } /** @@ -221,8 +236,7 @@ export class HourPickerComponent implements OnChanges, OnDestroy { end: '', error: 'incomplete', }); - - this.checkHoursValid(); + this.submitForm(); } /** @@ -282,17 +296,13 @@ export class HourPickerComponent implements OnChanges, OnDestroy { } } } - // Émettre l'erreur à ajouter au formulaire pour autoriser // ou empêcher de passer à l'étape suivante - if (error) { - this.updateHoursError.emit({ badHoursFormat: true }); - } else { - this.updateHoursError.emit(null); - // Emit new form value - this.parseHoursToForm(); - this.updateForm.emit(this.parseHoursToForm()); - } + } + + public submitForm() { + this.checkHoursValid(); + this.updateForm.emit(this.parseHoursToForm()); } private createDay(day: Day): FormGroup { @@ -304,8 +314,8 @@ export class HourPickerComponent implements OnChanges, OnDestroy { private createTime(time: Time): FormGroup { return new FormGroup({ - openning: new FormControl(time.openning), - closing: new FormControl(time.closing), + openning: new FormControl(time.openning, Validators.required), + closing: new FormControl(time.closing, [Validators.required, CheckHours(time.openning)]), }); } } diff --git a/src/app/shared/validator/form.ts b/src/app/shared/validator/form.ts index 1a1cc906d..b07e69864 100644 --- a/src/app/shared/validator/form.ts +++ b/src/app/shared/validator/form.ts @@ -1,4 +1,4 @@ -import { FormGroup } from '@angular/forms'; +import { AbstractControl, FormGroup } from '@angular/forms'; // custom validator to check that two fields match export function MustMatch(controlName: string, matchingControlName: string): any { @@ -14,3 +14,14 @@ export function MustMatch(controlName: string, matchingControlName: string): any } }; } + +export function CheckHours(openning: number) { + return (control: AbstractControl) => { + const regex = new RegExp('^[0-9]*$'); + if (regex.test(control.value) && openning < control.value) { + return null; + } else { + return { forbiddenName: { value: control.value } }; + } + }; +} -- GitLab