visual + updates

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.html

@@ -1,10 +1,13 @@
-<form (submit)="submit(); $event.preventDefault()">
+<form [formRoot]="form">
     <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
     <p>Passnummer: {{ member.passnummer }}</p>
     <p>Geburtsdatum: {{ member.geburtsdatum | datePipe }}</p>
     <mat-form-field>
         <mat-label>K&uuml;ndigun zum</mat-label>
-        <input matInput [matDatepicker]="picker" [field]="form.kuendigungzum" />
+        <input
+            matInput
+            [matDatepicker]="picker"
+            [formField]="form.kuendigungzum" />
         <mat-hint>DD.MM.YYYY</mat-hint>
         <mat-datepicker-toggle
             matIconSuffix

packages/frontend/src/app/components/delete-member-dialog/delete-member-dialog.component.ts

@@ -4,7 +4,12 @@ import {
     inject,
     signal,
 } from '@angular/core';
-import { Field, form } from '@angular/forms/signals';
+import {
+    form,
+    FormField,
+    FormRoot,
+    TreeValidationResult,
+} from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -33,7 +38,8 @@ import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dia
         MatOptionModule,
         MatDatepickerModule,
         DatePipePipe,
-        Field,
+        FormField,
+        FormRoot,
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
@@ -49,16 +55,24 @@ export class DeleteMemberDialogComponent {
             ? dateToUTC(this.data.member.kuendigungzum)
             : null,
     });
-    protected readonly form = form(this.deletionModel);
+    protected readonly form = form(this.deletionModel, {
+        submission: {
+            action: async () => {
+                return await this.submit();
+            },
+        },
+    });
     protected readonly member = this.data.member;
 
-    protected submit() {
+    protected async submit(): Promise<TreeValidationResult> {
         const date = this.deletionModel().kuendigungzum;
-        api.scheduleDeletion(
-            this.member.id,
-            date ? dateToLocal(date).toISOString() : '',
-        ).then(() => {
-            this.dialogRef.close();
-        });
+        await api
+            .scheduleDeletion(
+                this.member.id,
+                date ? dateToLocal(date).toISOString() : '',
+            )
+            .then(() => {
+                this.dialogRef.close();
+            });
     }
 }