Fertig- next ist dashboard

src/app/features/demo/components/demo2/demo2.component.html

@@ -26,26 +26,43 @@
   </div>
 
   <div class="grid-col-span-2">
-    <app-form-group
-      title="Form Components 1"
-      description="Diese Informationen sind öffentlich sichtbar."
-    >
-      <app-form-select
-        label="Land"
-        [options]="countryOptions"
-        [(ngModel)]="selectedCountry"
+      <form [formGroup]="demoForm">
+   <app-form-group
+        title="Form Components 1"
+        description="Diese Informationen sind öffentlich sichtbar."
       >
-      </app-form-select>
+       <app-form-select
+          label="Land"
+          [options]="countryOptions"
+          [(ngModel)]="selectedCountry"
+          [ngModelOptions]="{standalone: true}"> <!-- Wichtig für die Mischung von ngModel und formGroup -->
+        </app-form-select>
 
-      <app-form-field label="Benutzername" type="text" [(value)]="benutzername">
-      </app-form-field>
+        <!-- Diese Felder verwenden jetzt formControlName -->
+        <app-form-field 
+          label="Benutzername" 
+          type="text" 
+          formControlName="username">
+        </app-form-field>
+        <app-form-field 
+          label="E-Mail-Adresse" 
+          type="email" 
+          formControlName="email">
+        </app-form-field>
+        <app-form-field 
+          label="Passwort" 
+          type="password" 
+          formControlName="password">
+        </app-form-field>
 
-      <app-form-field label="E-Mail-Adresse" type="email" [(value)]="email">
-      </app-form-field>
-
-      <app-form-textarea label="Biografie" [rows]="5" [(ngModel)]="biografie">
-      </app-form-textarea>
+        <app-form-textarea 
+          label="Biografie" 
+          [rows]="5" 
+          [(ngModel)]="biografie"
+          [ngModelOptions]="{standalone: true}">
+        </app-form-textarea>
     </app-form-group>
+    </form>
   </div>
 
   <div class="grid-col-span-2">

src/app/features/demo/components/demo2/demo2.component.ts

@@ -24,7 +24,12 @@ import {
   SelectOption,
 } from '../../../../shared/components/form/form-select/form-select.component';
 
-import { FormsModule } from '@angular/forms';
+import {
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  Validators,
+} from '@angular/forms';
 
 import { FormTextareaComponent } from '../../../../shared/components/form/form-textarea/form-textarea.component';
 
@@ -40,6 +45,8 @@ import { ButtonComponent } from '../../../../shared/components/ui/button/button.
 
 import { ChipComponent } from '../../../../shared/components/ui/chip/chip.component';
 
+import { ReactiveFormsModule } from '@angular/forms';
+
 // Wir definieren ein Interface für unsere KPI-Daten für Typsicherheit
 interface Kpi {
   value: string;
@@ -65,11 +72,16 @@ interface Kpi {
     ExpansionPanelComponent,
     PageHeaderComponent,
     ButtonComponent,
-    ChipComponent
+    ChipComponent,
+    ReactiveFormsModule
   ],
   templateUrl: './demo2.component.html',
 })
 export class Demo2Component {
+
+  demoForm: FormGroup;
+
+
   kpiData: Kpi[] = [
     {
       value: '€ 14.750',
@@ -199,8 +211,6 @@ export class Demo2Component {
     },
   ];
 
-  benutzername: string = '';
-  email: string = '';
   aktuellesPasswort: any = '';
   neuesPasswort: any = '';
 
@@ -221,11 +231,20 @@ export class Demo2Component {
   private readonly darkModeKey = 'app-dark-mode-setting';
   darkModeAktiv: boolean = false;
 
+
   constructor(
     private renderer: Renderer2,
     @Inject(DOCUMENT) private document: Document,
-    @Inject(PLATFORM_ID) private platformId: Object
-  ) {}
+    @Inject(PLATFORM_ID) private platformId: Object,
+
+    private fb: FormBuilder
+  ) {
+    this.demoForm = this.fb.group({
+      username: [''], // Entspricht dem [(value)]="benutzername"
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required]]
+    });
+  }
 
   ngOnInit(): void {
     this.loadThemeSetting();

src/app/features/demo/demo.routes.ts

@@ -15,13 +15,13 @@ export const DEMO_ROUTES: Routes = [
     // Diese Route passt auf '/demo/1' und lädt die Komponente genau einmal.
     path: '1',
     component: Demo1Component,
-    title: 'Demo',
+    title: 'Demo1',
   },
   {
     // Diese Route passt auf '/demo/1' und lädt die Komponente genau einmal.
     path: '2',
     component: Demo2Component,
-    title: 'Demo',
+    title: 'Demo2',
   },
   // Hier könntest du weitere Routen wie '2', '3' etc. hinzufügen,
   // die andere Komponenten laden.