Disable typing in textarea

Question

I want to disable the user from typing in textarea, when word count limit is reached. But the user should be able to edit the text within the given limit.

I used attr.disabled property to disable from typing. But, this just blocks the user from typing and editing. I want to do this in angular.

Thanks in advance

Answer 1

demo put this in component to count spaces

check(){
    return this.test.split(" ").length-1;
    
  }

in html

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    [maxLength]="10+check()"
   >
</textarea>

If you think function occurs performance loses then use (keypress) method and create attribute as ex_length=0; then in component.ts

keypress(){
    this.ex_length=this.test.split(" ").length-1; 
}

in html

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    (keypress)="onkeypress()"
    [maxLength]="10+ex_length"
   >
</textarea> 

or as other way you can use custom pipe Demo

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'max'
})
export class MaxPipe implements PipeTransform {

  transform(value: any): any {
    return 10 + value.split(" ").length-1;
  }

}

an in html

<textarea 
    [(ngModel)]="test"
    name=".."
    placeholder="..."
    [maxLength]="test | max"
   >
</textarea>