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