Validierung Part II, neue Komponenten

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

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { QuillModule } from 'ngx-quill';
+import { BaseInputComponent } from '../base-input/base-input.component';
+import { ValidationMessagesService } from '../validation-messages.service';
+
+@Component({
+  selector: 'app-validated-quill',
+  template: `
+    <div>
+      <label [for]="name" class="block text-sm font-medium text-gray-700">
+        {{ label }}
+        <span class="text-red-500 ml-1">{{ validationMessage }}</span>
+      </label>
+      <quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>
+    </div>
+  `,
+  standalone: true,
+  imports: [CommonModule, FormsModule, QuillModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ValidatedQuillComponent),
+      multi: true,
+    },
+  ],
+})
+export class ValidatedQuillComponent extends BaseInputComponent {
+  quillModules = {
+    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
+  };
+  constructor(validationMessagesService: ValidationMessagesService) {
+    super(validationMessagesService);
+  }
+
+  onInputChange(event: Event): void {
+    this.value = event;
+    this.onChange(this.value);
+  }
+}