2

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.

tanmay
  • 7,761
  • 2
  • 19
  • 38
dev tester
  • 327
  • 1
  • 10
  • 25

1 Answers1

1

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

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • 1
    I tried ` [(ngModel)]="yourWish"` and now i am getting this error: `SignupFormComponent.html:121 ERROR Error: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example:
    In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:`     – dev tester Sep 21 '18 at 05:56
  • Check the demo above – Sajeetharan Sep 21 '18 at 06:03
  • 1
    I did checked the demo, but using this code gives me above error – dev tester Sep 21 '18 at 06:04
  • set this to the input [ngModelOptions]="{standalone: true}" – Sajeetharan Sep 21 '18 at 06:04
  • 1
    I used it like `` and still getting the same error – dev tester Sep 21 '18 at 06:13
  • please search for the above error you will get 100 answers saying the fix – Sajeetharan Sep 21 '18 at 06:14