Validation first Part

bizmatch/src/app/components/validated-input/validated-input.component.html

@@ -0,0 +1 @@
+<p>validated-input works!</p>

bizmatch/src/app/components/validated-input/validated-input.component.ts

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-validated-input',
+  template: `
+    <div>
+      <label [for]="id" class="block text-sm font-medium text-gray-700">
+        {{ label }}
+        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
+      </label>
+      <input
+        type="text"
+        [ngModel]="value"
+        (input)="onInputChange($event)"
+        (blur)="onTouched()"
+        [attr.name]="name"
+        [required]="required"
+        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+      />
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedInputComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedInputComponent implements ControlValueAccessor {
+  @Input() label: string = '';
+  @Input() id: string = '';
+  @Input() name: string = '';
+  @Input() type: string = 'text';
+  @Input() required: boolean = false;
+  @Input() validationMessage: string = '';
+
+  @Input() value: any = '';
+  @Output() valueChange = new EventEmitter<any>();
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(value: any): void {
+    if (value !== undefined) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  onInputChange(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.value = value;
+    this.onChange(value);
+    this.valueChange.emit(value);
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Implementieren Sie dies, wenn Sie die Deaktivierung des Inputs unterstützen möchten
+  }
+}

bizmatch/src/app/components/validated-select/validated-select.component.html

@@ -0,0 +1 @@
+<p>validated-select works!</p>

bizmatch/src/app/components/validated-select/validated-select.component.ts

@@ -0,0 +1,77 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-validated-select',
+  template: `
+    <div>
+      <label [for]="id" class="block text-sm font-medium text-gray-700">
+        {{ label }}
+        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
+      </label>
+      <select
+        [id]="id"
+        [name]="name"
+        [ngModel]="value"
+        (change)="onSelectChange($event)"
+        (blur)="onTouched()"
+        [required]="required"
+        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+      >
+        <option value="" disabled selected>Select an option</option>
+        <option *ngFor="let option of options" [value]="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedSelectComponent implements ControlValueAccessor {
+  @Input() label: string = '';
+  @Input() id: string = '';
+  @Input() name: string = '';
+  @Input() required: boolean = false;
+  @Input() validationMessage: string = '';
+  @Input() options: Array<{ value: any; label: string }> = [];
+
+  @Input() value: any = '';
+  @Output() valueChange = new EventEmitter<any>();
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(value: any): void {
+    if (value !== undefined) {
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  onSelectChange(event: Event): void {
+    const value = (event.target as HTMLSelectElement).value;
+    this.value = value;
+    this.onChange(value);
+    this.valueChange.emit(value);
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Implementieren Sie dies, wenn Sie die Deaktivierung des Selects unterstützen möchten
+  }
+}