diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index 7bad605279cc393dfecb34aee7eea23f2ded6cb5..3b4aea128e5f33cbe30a9717c2a3ad90a7f9329c 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 7916e9feec49f1d1bd59d54db176a2d932991d46..0a509ad52dd5895c6d6c3aef3c5de0a915a07dbe 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 03fefa2346d548479b8d9a9d17c4a2cce4fd9826..488eed19b8389953e82feddf13ca127230ff1b65 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 1a1cc906def4e3e5fe38aef3e0dd61155f9a8b54..b07e69864eed0d900b961bac12f4df6e7da398dd 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 } }; + } + }; +}