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>