Validierung Part II, neue Komponenten

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

@@ -1,22 +1,24 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { ValidationMessagesService } from '../validation-messages.service';
 
 @Component({
   selector: 'app-validated-input',
   template: `
     <div>
-      <label [for]="id" class="block text-sm font-medium text-gray-700">
+      <label [for]="name" class="block text-sm font-medium text-gray-700">
         {{ label }}
         <span class="text-red-500 ml-1">{{ validationMessage }}</span>
       </label>
       <input
         type="text"
+        [id]="name"
         [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>
@@ -31,32 +33,11 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
     },
   ],
 })
-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 = '';
+export class ValidatedInputComponent extends BaseInputComponent {
   @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;
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
   }
 
   onInputChange(event: Event): void {
@@ -65,8 +46,4 @@ export class ValidatedInputComponent implements ControlValueAccessor {
     this.onChange(value);
     this.valueChange.emit(value);
   }
-
-  setDisabledState?(isDisabled: boolean): void {
-    // Implementieren Sie dies, wenn Sie die Deaktivierung des Inputs unterstützen möchten
-  }
 }