use signal forms

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

@@ -1,13 +1,17 @@
-<form [formGroup]="form" (ngSubmit)="submit()">
-  <p>Name: {{ member.vorname }} {{ member.nachname }}</p>
-  <p>Passnummer: {{ member.passnummer }}</p>
-  <p>Geburtsdatum: {{ member.geburtsdatum??undefined |  datePipe }}</p>
-  <mat-form-field>
-    <mat-label>K&uuml;ndigun zum</mat-label>
-    <input matInput [matDatepicker]="picker" formControlName="kuendigungzum" />
-    <mat-hint>DD.MM.YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker #picker></mat-datepicker>
-  </mat-form-field>
-  <button mat-raised-button color="primary" type="submit">Speichern</button>
+<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" />
+        <mat-hint>DD.MM.YYYY</mat-hint>
+        <mat-datepicker-toggle
+            matIconSuffix
+            [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+    <button mat-raised-button color="primary" (click)="submit()">
+        Speichern
+    </button>
 </form>

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

@@ -1,5 +1,5 @@
-import { Component, Inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal } from '@angular/core';
+import { Field, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,18 +9,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import * as api from '../../generated-api/api';
-import { DatePipePipe, dateToLocal } from '../../pipes/date-pipe.pipe.js';
+import {
+    DatePipePipe,
+    dateToLocal,
+    dateToUTC,
+} from '../../pipes/date-pipe.pipe.js';
 import { EditMemberDialogComponent } from '../edit-member-dialog/edit-member-dialog.component.js';
 
-type DeletionForm = {
-    kuendigungzum: FormControl<Date | null>;
-};
-
 @Component({
     selector: 'app-delete-member-dialog',
     standalone: true,
     imports: [
-        ReactiveFormsModule,
         MatFormFieldModule,
         MatInputModule,
         MatCheckboxModule,
@@ -29,32 +28,31 @@ type DeletionForm = {
         MatOptionModule,
         MatDatepickerModule,
         DatePipePipe,
+        Field,
     ],
     templateUrl: './delete-member-dialog.component.html',
     styleUrl: './delete-member-dialog.component.scss',
 })
 export class DeleteMemberDialogComponent {
-    form: FormGroup<DeletionForm>;
-    member: api.MemberDto;
-    constructor(
-        @Inject(MAT_DIALOG_DATA) public data: { member: api.MemberDto },
-        private dialogRef: MatDialogRef<EditMemberDialogComponent>,
-    ) {
-        this.member = data.member;
-        this.form = new FormGroup<DeletionForm>({
-            kuendigungzum: new FormControl(null),
-        });
-    }
+    private readonly data = inject<{ member: api.MemberDto }>(MAT_DIALOG_DATA);
+    private readonly dialogRef = inject(
+        MatDialogRef<EditMemberDialogComponent>,
+    );
+    private readonly deletionModel = signal({
+        kuendigungzum: this.data.member.kuendigungzum
+            ? dateToUTC(this.data.member.kuendigungzum)
+            : null,
+    });
+    protected readonly form = form(this.deletionModel);
+    protected readonly member = this.data.member;
 
-    async submit() {
-        const date = this.form.controls.kuendigungzum.value;
-        if (date) {
-            await api.scheduleDeletion(
-                this.member.id!,
-                dateToLocal(date).toISOString(),
-            );
+    protected async submit() {
+        const date = this.deletionModel().kuendigungzum;
+        await api.scheduleDeletion(
+            this.member.id,
+            date ? dateToLocal(date).toISOString() : '',
+        );
 
-            this.dialogRef.close();
-        }
+        this.dialogRef.close();
     }
 }