Estoy usando Quill Editor en angular 2 y quiero limitar al usuario para que ingrese un máximo de 1000 caracteres.
Hasta donde yo sé, no hay una configuración integrada para eso. Sin embargo, puede eliminar la entrada que exceda una cierta longitud.
Código de ejemplo de este problema de github
const limit = 1000; quill.on('text-change', function (delta, old, source) { if (quill.getLength() > limit) { quill.deleteText(limit, quill.getLength()); } });No está claro si está usando quill puro o algo como ngx-quill, por lo que no puedo proporcionar un ejemplo completo. Proporcione más detalles si desea ayuda adicional para integrarlo en angular.
Recuerde quill.off(...) para su controlador de cambio de texto en ngOnDestroy para evitar fugas.
Solución agregada usando el módulo ngx-quill .
editor.component.ts
import { Component } from '@angular/core'; const MAX_LENGTH = 10; @Component({ selector: 'editor', templateUrl: './editor.component.html', }) export class EditorComponent { /* * Delete added characters that exceeds max length */ textChanged($event) { if ($event.editor.getLength() > MAX_LENGTH) { $event.editor.deleteText(MAX_LENGTH, $event.editor.getLength()); } } }editor.template.html
<quill-editor (onContentChanged)="textChanged($event)"></quill-editor>Aquí hay un ejemplo usando ngx-quill .
Un enfoque para hacer esto sería establecer maxLength en el número deseado y mostrar un error al usuario. Además, la acción se puede bloquear hasta que el usuario la solucione.
Aquí, he agregado las propiedades minLength y maxLength. Mostrará un mensaje debajo del editor y deshabilitará el botón de acción. Solo cuando se cumpla la validación, el botón se activará.
<quill-editor [style]="{height: '200px'}" name="notes" [(ngModel)]="note" [minLength]="10" [maxLength]="400" #noteInput="ngModel"></quill-editor> <span class="hints" *ngIf="!noteInput.valid"> Min 10 characters and note more than 400</span> <button fxFlexAlign="end" mat-raised-button color="primary" class="btn--rounded" (click)="addNote()" [disabled]="!ticketNoteInput.valid">Add</button>Hay configuraciones integradas para admitir validaciones de longitud mínima y longitud máxima. Sin embargo, no agrega la clase 'errors.minlength'. Solo agregará la clase 'ng-invalid'.
<quill-editor [(ngModel)]="topic.description" [bounds]="'self'" [minLength]="'5'" #topicDesc="ngModel"> <span *ngIf="!topicDesc.valid" class="requiredField"> Topic Description is required </span>