web-dev-qa-db-fra.com

Angular textarea matInput: comment définir la longueur maximale/ligne + le nombre maximal de lignes

L'extrait de code html suivant:

<mat-form-field class='textarea'>
    <textarea #txtarea matInput (change)='txtAreaChange()' [placeholder]="label" [(ngModel)]='text'></textarea>
    <mat-hint [class.red]="txtarea.value.split('\n').length > textAreaLimit[1]" align="start"> {{txtarea.value ? txtarea.value.split('\n').length : 0}}/{{textAreaLimit[1]}} lines</mat-hint>
    <mat-hint [class.red]="txtarea.value && txtarea.value.split('\n').map( len).max() > textAreaLimit[0]" align="end">Longest line: {{txtarea.value ? txtarea.value.split('\n').map( len).max() : 0}}/{{textAreaLimit[0]}}</mat-hint>
</mat-form-field>

Définit une entrée textarea avec une liaison bidirectionnelle. Il vérifie la taille: nombre total de lignes et longueur maximale d'une ligne. Si elles sont supérieures à certaines contraintes données dans textAreaLimit, les astuces deviennent rouges.

Je voudrais le modifier pour que l'utilisateur ne puisse pas rompre cette contrainte, par exemple si le nombre maximal de lignes est de 3 et qu'il y a 3 lignes, l'utilisateur ne peut pas ajouter de nouvelle ligne. Comment cela peut-il être fait sans rompre la liaison bidirectionnelle?

angularangular-materialtwo-way-binding
4
Learning is a mess

Pour ce besoin/comportement spécifique, vous devez créer un simple validateur personnalisé.

maxLinesValidator(limit: number): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
        const exceeded = control.value.length && control.value.split('\n').length > 4;
        return exceeded ? {'maxLines': {value: true}} : null;
    };
}

Que vous allez lier à votre FormControl. Vous pouvez jeter un coup d'oeil à ce travail fiddle (src/app/reactive .ts + html) où le champ text est validé en temps réel et affiche une erreur si l'utilisateur dépasse la limite maximale de lignes

1
Cétia

utiliser la propriété [maxLength]

<textarea #txtarea matInput  [maxLength]="maxNo" (change)='txtAreaChange()' [placeholder]="label" [(ngModel)]='text'></textarea>
1
Sachila Ranawaka