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?

Answer 1

use [maxLength] property

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

Answer 2

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