fix: controls correctly detect edited state (#2076)

src/app/child-dev-project/attendance/edit-attendance/edit-attendance.component.ts

@@ -90,12 +90,13 @@ export class EditAttendanceComponent
     const index = children.indexOf(id);
     children.splice(index, 1);
     this.attendanceForm.value.delete(id);
-    this.formControl.setValue([...children]);
     this.formControl.markAsDirty();
+    this.formControl.setValue([...children]);
   }
 
   updateAttendanceValue(childId, property: "status" | "remarks", newValue) {
-    this.getAttendance(childId)[property] = newValue;
     this.formControl.markAsDirty();
+    this.getAttendance(childId)[property] = newValue;
+    this.attendanceForm.setValue(this.attendanceForm.value);
   }
 }

src/app/core/basic-datatypes/entity-array/edit-entity-array/edit-entity-array.component.html

@@ -1,7 +1,7 @@
 <app-entity-select
   [entityType]="entityName"
   [selection]="formControl.value"
-  (selectionChange)="formControl.setValue($event); formControl.markAsDirty()"
+  (selectionChange)="formControl.markAsDirty(); formControl.setValue($event)"
   [disabled]="formControl.disabled"
   [label]="label"
   [placeholder]="placeholder"

src/app/core/basic-datatypes/month/edit-month/edit-month.component.ts

@@ -57,8 +57,8 @@ export const MY_FORMATS = {
 })
 export class EditMonthComponent extends EditComponent<Date> {
   setMonthAndYear(date: Moment, datepicker: MatDatepicker<Moment>) {
-    this.formControl.setValue(date.toDate());
     this.formControl.markAsDirty();
+    this.formControl.setValue(date.toDate());
     datepicker.close();
   }
 }

src/app/features/file/edit-file/edit-file.component.ts

@@ -78,6 +78,7 @@ export class EditFileComponent extends EditComponent<string> implements OnInit {
     // directly reset input so subsequent selections with the same name also trigger the change event
     this.fileUploadInput.nativeElement.value = "";
     this.selectedFile = file;
+    this.formControl.markAsDirty();
     this.formControl.setValue(file.name);
   }
 
@@ -118,6 +119,7 @@ export class EditFileComponent extends EditComponent<string> implements OnInit {
   }
 
   delete() {
+    this.formControl.markAsDirty();
     this.formControl.setValue(null);
     this.selectedFile = undefined;
     // remove is only necessary if an initial value was set

src/app/features/location/edit-location/edit-location.component.spec.ts

@@ -111,7 +111,7 @@ describe("EditLocationComponent", () => {
 
     await clearButton.click();
 
-    expect(component.formControl.value).toBeNull();
+    expect(component.formControl.value).toBeUndefined();
     await expectAsync(input.getValue()).toBeResolvedTo("");
   });
 

src/app/features/location/edit-location/edit-location.component.ts

@@ -81,7 +81,8 @@ export class EditLocationComponent
     );
   }
 
-  selectLocation(selected: GeoResult) {
+  selectLocation(selected?: GeoResult) {
+    this.formControl.markAsDirty();
     this.formControl.setValue(selected);
     this.filteredOptions.next([]);
   }
@@ -92,7 +93,7 @@ export class EditLocationComponent
   }
 
   clearInput() {
-    this.formControl.setValue(null);
+    this.selectLocation();
   }
 
   private getGeoLookupResult(searchTerm) {
@@ -122,7 +123,7 @@ export class EditLocationComponent
       ref
         .afterClosed()
         .pipe(concatMap(() => this.lookupCoordinates(marked.value[0])))
-        .subscribe((res) => this.formControl.setValue(res));
+        .subscribe((res) => this.selectLocation(res));
     }
   }