CODEWITHSUNDEEP
htmlangulartextarea
Rich
Rich

Reputation: 4248

Strictly Limit the number of rows in textarea Angular

I am looking for a resolution on how to limit the allowed rows and columns to input in a textarea in an Angular way. I found a lot of solution using a jQuery, and it is a little bit messy. I am wondering if there's an Angular way to do this.

So let say, I do have a text area that needs to strictly limit the number of rows and columns. I set this up this way.

<textarea matInput formControlName="cardDescription" rows="5" cols="5" placeholder="Card Description"></textarea>

Unfortunately, this line of code only initialises the view for about 5 rows and I think the cols does not do anything.

What am I missing here?

Upvotes: 2

Views: 1103

Answers (1)

Deepika Wadhera
Deepika Wadhera

Reputation: 320

Try to do this

html:

<textarea cols="30" rows="5" [(ngModel)]="data" (ngModelChange)="doSomething($event)"></textarea>

.ts:

 data: any = '';
 doSomething(event){

    var lines = 5;

        let newLines = this.data.split("\n").length;

        if(event.keyCode == 13 && newLines >= lines) {
            console.log('limit exceeded')
        }
        else {
            console.log('input under limit')
        }
    }

Upvotes: 1

Related Questions