How to prevent user type in input textbox more than specified number of input character in angular?

Question

i use textarea tag and i want when user type in that, she can not type more than forexample 300 character. i write code and i have real time character number that user type but i want when it comes to 300 character she can not type anymore.

here is my html code:

<textarea type="text" style="margin-bottom: 25px" id="textAreaScroll" formControlName="text" placeholder="متن ..." (keyup)="postLengthCheck()"> </textarea> <span *ngIf="createPostForm.controls['text'].valid" class="text-counter">{{validTextLength}}</span>

and here is my postLengthCheck() method im my component:

postLengthCheck() { if (this.createPostForm.controls['text'].value !== null) { this.postLength = this.createPostForm.controls['text'].value.length; this.validTextLength = 2200 - this.postLength; } }

how can i fix this ?

Just use maxlength='300' property in your <textarea> that might work — Rahul
– Rahul, Commented Nov 7, 2018 at 9:56

Mohamed Ali RACHID · Accepted Answer · 2018-11-07 10:00:09Z

1

you can add a maxLength validator when creating your formControl like this :

new FormControl('text', [Validators.maxLength(100)]);

Regards,

answered Nov 7, 2018 at 10:00

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohandes Over a year ago

thank you for your answer but my main problem is i want user can not type in textbox anymore in this situation and i don't know how to do this

Rahul · Accepted Answer · 2018-11-07 10:04:17Z

You can just use maxlength='300' prop in you <textarea> like this

 <textarea type="text" style="margin-bottom: 25px" id="textAreaScroll" formControlName="text" placeholder="متن ..." maxLength="300"> </textarea>

if you are reading the value from Component class just use attribute binding in [maxlength]='your_prop_name' - this might work

Thanks happy coding !!

Sachila Ranawaka · Accepted Answer · 2018-11-07 09:56:55Z

Why not use [maxLength]="'300'"

<textarea type="text" style="margin-bottom: 25px" id="textAreaScroll" formControlName="text" placeholder="متن ..." (keyup)="postLengthCheck()" [maxLength]="'300'"`> </textarea>

Collectives™ on Stack Overflow

How to prevent user type in input textbox more than specified number of input character in angular?

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related