Reset validation status after entering start/end datetimes in absence creation form

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -56,7 +56,7 @@
           :subjects="subjects"
           :documentation="item"
           :affected-query="lastQuery"
-          :value="(selectedParticipations[item.id] ??= [])"
+          :value="selectedParticipations[item.id] ??= []"
           @input="selectParticipation(item.id, $event)"
         />
       </template>
@@ -69,9 +69,7 @@
         <DocumentationLoader />
       </template>
     </infinite-scrolling-date-sorted-c-r-u-d-iterator>
-    <absence-creation-dialog
-      :absence-reasons="absenceReasons"
-    />
+    <absence-creation-dialog :absence-reasons="absenceReasons" />
   </div>
 </template>
 

aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue

 <template>
-  <v-form @input="$emit('valid', $event)">
+  <v-form ref="form" @input="$emit('valid', $event)">
     <v-container>
       <v-row>
         <div aria-required="true" class="full-width">
@@ -148,17 +148,27 @@ export default {
       const parsedStart = DateTime.fromISO(startDate);
       const parsedEnd = DateTime.fromISO(this.endDate);
       if (parsedStart >= parsedEnd) {
-        this.$emit('end-date', parsedStart.plus({ minutes: 5 }).toISO({ suppressSeconds: true }));
+        this.$emit(
+          "end-date",
+          parsedStart.plus({ minutes: 5 }).toISO({ suppressSeconds: true }),
+        );
       }
-      this.$emit('start-date', startDate);
+      this.$emit("start-date", startDate);
+      this.$refs.form.resetValidation();
+      this.$refs.form.validate();
     },
     handleEndDate(endDate) {
       const parsedStart = DateTime.fromISO(this.startDate);
       const parsedEnd = DateTime.fromISO(endDate);
       if (parsedEnd <= parsedStart) {
-        this.$emit('start-date', parsedEnd.minus({ minutes: 5 }).toISO({ suppressSeconds: true }));
+        this.$emit(
+          "start-date",
+          parsedEnd.minus({ minutes: 5 }).toISO({ suppressSeconds: true }),
+        );
       }
-      this.$emit('end-date', endDate);
+      this.$emit("end-date", endDate);
+      this.$refs.form.resetValidation();
+      this.$refs.form.validate();
     },
   },
 };