Angular textarea matInput: how can set max length/line + max number of lines

Question

The following html snippet of code:

<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>

Defines a textarea input with two-way binding. It does check for size: total number of lines and max length of a line. If these are greater that some constraints given in textAreaLimit then the hints become red.

I would like to change it so that the user cannot break this constraints, such as if the max number of line is 3 and there a 3 lines the user cannot add a new line. How can this be done without breaking the two-way binding?

Not clear what you're asking. Depending on the size of your screen, a text could `appear` on a single line on desktop, and on 4 lines of a mobile device.. So I don't understand what you want to achieve here .. Define clearly what you call a `line` — Jscti, Dec 17 '18 at 10:38
A line here is defined a substring until hitting the next `\n` character, so as to precisely being independent of resizing the textarea box. In other words, after you collect the input value of this textarea, the number of lines is the number of `\n` + 1. — Learning is a mess, Dec 17 '18 at 12:01

score 7 · Answer 1 · answered Dec 14 '18 at 15:34

7

use [maxLength] property

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

answered Dec 14 '18 at 15:34

Sachila Ranawaka

28,742
4
48
69

Isn't it just to constraint the total length after concatenating all the lines? https://www.w3schools.com/tags/att_textarea_maxlength.asp – Learning is a mess Dec 14 '18 at 16:16
I need a constraint on each length + the total number of lines – Learning is a mess Dec 14 '18 at 16:17
1

Then set `[rows]="noOfRows"` – Sachila Ranawaka Dec 14 '18 at 16:29
1

`rows number Specifies the visible number of lines in a text area` this only changes the display, does not restrict the number of lines – Learning is a mess Dec 14 '18 at 17:50
Works well to restrict the number of characters, but does not show a message like "max number of character reached.." . For that , you need to create a custom validator. – Indrajit Kanjilal Sep 26 '20 at 05:31

Jscti · Accepted Answer · 2020-08-24T07:40:39.817

4

For this specific need/behavior, you need to create a simple custom validator

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

That you'll bind to your FormControl. You can take a look at this working fiddle (src/app/reactive .ts + html) where the text field is validated in real time and displays an error if user exceed the maximum lines limit

edited Aug 24 '20 at 07:40

answered Dec 17 '18 at 13:18

Jscti

12,924
4
57
83

1

helpful answer :) however you need to change `4` to `limit` – Fetrarij Aug 09 '20 at 15:06
1

Hi you could use this library https://www.npmjs.com/package/numeric-formatter – Aadhil Musthaq Nov 03 '20 at 12:55

Angular textarea matInput: how can set max length/line + max number of lines

2 Answers2