42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
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);
|
|
}
|
|
}
|