Fertig- next ist dashboard

src/app/shared/components/form/form-field/form-field.component.html

@@ -1,11 +1,13 @@
 <div class="form-field">
-  <input
+  <input 
     [type]="type"
     class="form-input"
-    [id]="label"
+    [id]="controlId"
     placeholder=" "
-    [value]="value"
-    (input)="onInput($event)"
-    [disabled]="disabled">
-  <label [for]="label" class="form-label">{{ label }}</label>
+    [disabled]="disabled"
+    [(ngModel)]="value"
+    (ngModelChange)="onChange($event)"
+    (blur)="onTouched()">
+  
+  <label [for]="controlId" class="form-label">{{ label }}</label>
 </div>

src/app/shared/components/form/form-field/form-field.component.ts

@@ -1,32 +1,57 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {
+  FormsModule,
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-form-field',
   standalone: true,
-  imports: [CommonModule], // Kein FormsModule mehr nötig
+  imports: [
+    CommonModule,
+    FormsModule, // Wichtig für [(ngModel)] im Template
+  ],
   templateUrl: './form-field.component.html',
   styleUrl: './form-field.component.css',
-  // Kein 'providers'-Block für ControlValueAccessor mehr
+  providers: [
+    {
+      // Stellt diese Komponente als "Value Accessor" zur Verfügung
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormFieldComponent),
+      multi: true,
+    },
+  ],
 })
-export class FormFieldComponent {
-  // EINGÄNGE: Werte, die von außen gesetzt werden
+// Die Komponente implementiert die ControlValueAccessor-Schnittstelle
+export class FormFieldComponent implements ControlValueAccessor {
   @Input() label: string = '';
   @Input() type: 'text' | 'email' | 'password' = 'text';
-  @Input() value: string = ''; // Der aktuelle Wert des Feldes
-  @Input() disabled: boolean = false;
 
-  // AUSGANG: Ein Event, das ausgelöst wird, wenn sich der Wert ändert
-  // WICHTIG: Der Name muss `[InputName]Change` sein, also `valueChange`
-  @Output() valueChange = new EventEmitter<string>();
+  controlId = `form-field-${Math.random().toString(36)}`;
 
-  /**
-   * Diese Methode wird bei jeder Tastatureingabe im Input-Feld aufgerufen.
-   */
-  onInput(event: Event): void {
-    // 1. Hole den neuen Wert aus dem HTML-Input-Element
-    const newValue = (event.target as HTMLInputElement).value;
-    // 2. Sende den neuen Wert über den EventEmitter nach außen
-    this.valueChange.emit(newValue);
+  // --- Eigenschaften für ControlValueAccessor ---
+  value: string = '';
+  onChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+  disabled = false;
+
+  // --- Methoden, die von Angular Forms aufgerufen werden ---
+
+  writeValue(value: any): void {
+    this.value = value;
   }
-}
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}