Show characters count while typing in textarea Angular 5

angular5 charactercount
dev tester picture dev tester · Sep 21, 2018 · Viewed 9k times · Source

I am trying to write a code to show characters count below the textarea field. I found many solutions for doing this but i don't know why its not working for me.

Here is the code what i am trying:

<div class="form-group border-0 describe mb-0">
  <label for="describewishInput" i18n="@@describewishLabel" class="text-capitalize">Describe Your Wish:</label>
    <span ngbTooltip="Please describe your wish here"
            placement="top" class="tt tt-bottom mt-1 mr-0"></span>
      <textarea type="text" (ngModel)="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="@@describeyourwish"></textarea>
      <span class="pull-right char"><em>{{ 255 - yourWish.length }} characters left</em></span>
</div>

Here is the error i am getting

SignupFormComponent.html:121 ERROR TypeError: Cannot read property 'length' of undefined
at Object.eval [as updateRenderer] (SignupFormComponent.html:122)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at checkAndUpdateView (core.js:13849)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)

Can you help me with this. Its very frustrating as i am working on it from 1 day.

Thanks in Advance.

Answer

Sajeetharan picture Sajeetharan · Sep 21, 2018

You need to use two way data binding [(ngModel)] ,

<textarea type="text" [(ngModel)]="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="@@describeyourwish"></textarea>

STACKBLITZ DEMO

Related questions

Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found

When running the terminal commands ng server or ng serve --live-reload=true, I'm getting this issue: The serve command requires to be run in an Angular project, but a project definition could not be found.

Read More
How to add CORS request in header in Angular 5

I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers? Here is service file code: import { …

Read More
Set focus on <input> element

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused. I have tried a few ways found on StackOverflow …

Read More