Sunday, 16 December 2018

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

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"> / lines</mat-hint>
    <mat-hint [class.red]="txtarea.value && txtarea.value.split('\n').map( len).max() > textAreaLimit[0]" align="end">Longest line: /</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?



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

No comments:

Post a Comment