validasi mandatory hari

This commit is contained in:
Fuzi_fauzia 2024-08-28 15:16:05 +07:00
parent 7c443080d6
commit b00896d407
4 changed files with 49 additions and 37 deletions

View File

@ -13,7 +13,7 @@
href="https://allbestsistem.com/" href="https://allbestsistem.com/"
target="_blank" target="_blank"
style="background-color: #ffffff !important;" style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-08-27.2) >Smart Building Management Systems (V@2024-08-28.1)
</a></span </a></span
> >
</p> </p>

View File

@ -80,7 +80,11 @@
}}</label> }}</label>
</div> </div>
</div> </div>
<div *ngIf="myForm.hasError('noDaySelected') && myForm.touched" class="text-danger">
Please select at least one day.
</div>
</div> </div>
<!-- Checkbox for Repeat --> <!-- Checkbox for Repeat -->
<div class="form-group col-md-12"> <div class="form-group col-md-12">

View File

@ -85,6 +85,7 @@ export class ControlSchedulerComponent {
}); });
this.myForm = this.fb.group(controls); this.myForm = this.fb.group(controls);
this.myForm.setValidators(this.atLeastOneDaySelectedValidator());
} }
editForm() { editForm() {
@ -105,6 +106,15 @@ export class ControlSchedulerComponent {
}); });
} }
atLeastOneDaySelectedValidator() {
return (formGroup: FormGroup) => {
const selectedDays = this.daysOfWeek.some(
(day) => formGroup.get(day.value)?.value
);
return selectedDays ? null : { noDaySelected: true };
};
}
onDayChange(day: string, isChecked: boolean) { onDayChange(day: string, isChecked: boolean) {
if (isChecked) { if (isChecked) {
this.selectedDays.push(day); this.selectedDays.push(day);
@ -114,46 +124,44 @@ export class ControlSchedulerComponent {
} }
save() { save() {
const formValues = this.myForm.value;
// Collect selected days' labels
const selectedDays = this.daysOfWeek
.filter((day) => formValues[day.value])
.map((day) => day.value);
// Construct the final output
let result = {};
if (this.mode === "add") {
result = {
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
} else {
result = {
id: this.data.id,
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
}
if (this.myForm.valid) { if (this.myForm.valid) {
const formValues = this.myForm.value;
// Collect selected days' labels
const selectedDays = this.daysOfWeek
.filter((day) => formValues[day.value])
.map((day) => day.value);
// Construct the final output
let result = {};
if (this.mode === "add") {
result = {
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
} else {
result = {
id: this.data.id,
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
}
this.activeModal.close(result); this.activeModal.close(result);
} else { } else {
this.markFormGroupTouched(this.myForm); this.markFormGroupTouched(this.myForm);
} }
// console.log("Form Result: ", result);
} }
markFormGroupTouched(formGroup: FormGroup) { markFormGroupTouched(formGroup: FormGroup) {

View File

@ -138,7 +138,7 @@
<p <p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1" class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
> >
<span>(v@2024.08.27.2)</span> <span>(v@2024.08.28.1)</span>
</p> </p>
<!-- <div class="card-body"> <!-- <div class="card-body">
<a <a