good image bearbeiten muss noch

src/app/features/components/products/product-form/product-form.component.css

@@ -108,7 +108,7 @@ h4[card-header] { margin-bottom: 0; }
 .placeholder { color: var(--text-color-secondary); }
 .category-checkbox-group { max-height: 200px; overflow-y: auto; padding: 0.75rem; }
 .category-checkbox-group label { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
-.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: var(--grid-gap); padding-top: var(--grid-gap); border-top: 1px solid var(--color-border); }
+.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: var(--grid-gap); padding-top: var(--grid-gap); border-top: none; }
 
 @media (max-width: 1024px) {
   .edit-layout { grid-template-columns: 1fr; }

src/app/features/components/products/product-form/product-form.component.html

@@ -84,7 +84,7 @@
 
           <app-form-field label="Lagerbestand" type="number" formControlName="stockQuantity" [control]="productForm.get('stockQuantity')"></app-form-field>
           <app-form-field label="Gewicht (kg)" type="number" formControlName="weight" [control]="productForm.get('weight')"></app-form-field>
-          <app-form-select label="Lieferant" [options]="supplierOptions" formControlName="supplierId"></app-form-select>
+          <app-form-select label="Lieferant" [options]="supplierOptions" formControlName="supplierId"  [control]="productForm.get('supplierId')"></app-form-select>
 
 
           <app-product-category-dropdown

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;