good image bearbeiten muss noch

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

@@ -1,5 +1,5 @@
 import { Component, Input, forwardRef, HostListener, ElementRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, AbstractControl } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 
@@ -39,10 +39,12 @@ export interface SelectOption {
 export class FormSelectComponent implements ControlValueAccessor {
   @Input() label: string = '';
   @Input() options: SelectOption[] = [];
+  @Input() control: AbstractControl | null = null;
 
-  // NEU: Zustand für das Dropdown-Menü und das angezeigte Label
   isOpen = false;
-  selectedLabel: string | null = null;
+  
+  // -- ENTFERNEN SIE DIESE ZEILE --
+  // selectedLabel: string | null = null; 
 
   controlId = `form-select-${Math.random().toString(36).substring(2)}`;
   value: any = null;
@@ -50,46 +52,47 @@ export class FormSelectComponent implements ControlValueAccessor {
   onTouched: () => void = () => {};
   disabled = false;
 
+  // ++ FÜGEN SIE DIESEN GETTER HINZU ++
+  // Dieser Getter wird immer dann neu berechnet, wenn Angular die Ansicht prüft.
+  // Er hat immer Zugriff auf die aktuellsten `options` und den aktuellsten `value`.
+  get selectedLabel(): string | null {
+    const selectedOption = this.options.find(opt => opt.value === this.value);
+    return selectedOption ? selectedOption.label : null;
+  }
+
   constructor(private elementRef: ElementRef) {}
 
-  // NEU: Schließt das Dropdown, wenn außerhalb des Elements geklickt wird
   @HostListener('document:click', ['$event'])
-   onDocumentClick(event: MouseEvent): void {
-    // Diese Logik ist jetzt sicher, weil Klicks innerhalb der Komponente sie nie erreichen
+  onDocumentClick(event: MouseEvent): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
       this.isOpen = false;
     }
   }
 
-  // ÜBERARBEITET: writeValue aktualisiert jetzt auch das sichtbare Label
+  // KORRIGIERT: writeValue setzt jetzt nur noch den Wert.
   writeValue(value: any): void {
     this.value = value;
-    const selectedOption = this.options.find(opt => opt.value === value);
-    this.selectedLabel = selectedOption ? selectedOption.label : null;
+    // Die Zeile, die `selectedLabel` gesetzt hat, wird nicht mehr benötigt.
   }
 
   registerOnChange(fn: any): void { this.onChange = fn; }
   registerOnTouched(fn: any): void { this.onTouched = fn; }
   setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
 
-  // NEU: Methode zum Öffnen/Schließen des Menüs
- // ÜBERARBEITET: Nimmt das Event entgegen und stoppt es
   toggleDropdown(event: MouseEvent): void {
-    event.stopPropagation(); // <-- WICHTIGSTE KORREKTUR
+    event.stopPropagation();
     if (!this.disabled) {
       this.isOpen = !this.isOpen;
-      if (!this.isOpen) {
-        this.onTouched();
-      }
+      if (!this.isOpen) { this.onTouched(); }
     }
   }
 
-  // ÜBERARBEITET: Nimmt das Event entgegen und stoppt es
+  // KORRIGIERT: selectOption setzt jetzt nur noch den Wert.
   selectOption(option: SelectOption, event: MouseEvent): void {
-    event.stopPropagation(); // <-- WICHTIGE KORREKTUR
+    event.stopPropagation();
     if (!this.disabled) {
       this.value = option.value;
-      this.selectedLabel = option.label;
+      // Die Zeile, die `selectedLabel` gesetzt hat, wird nicht mehr benötigt.
       this.onChange(this.value);
       this.onTouched();
       this.isOpen = false;