CODEWITHSUNDEEP
angular
Caru
Caru

Reputation: 11

counting chars in textarea using angular

I have a function to count chars in a text area:

.ts:

  valueChange(justification) {
    this.remainingText = 1000 - justification.length;
    console.log(this.remainingText);
  }

html:

   <div class="bx--text-area__wrapper">
      <textarea
        cols="50"
        rows="2"
        id="business-justification-textarea"
        class="bx--text-area bx--text-area--light"
        formControlName="justification"
        pInputTextArea
        (ngModelChange)="valueChange(justification)"
        maxlength="1000"
      >
      </textarea>
      <span id="count1">1000</span>

I get NaN on the console.log...can someone help?

Upvotes: 1

Views: 689

Answers (2)

Srijon Chakraborty
Srijon Chakraborty

Reputation: 2164

I think if you want work with ngModelChange then you have to use ngModel. If you use ngModel your code should work. A sample code and Stackblitz link given below=>
HTML

 <div>
      <textarea  class="form-control"
                    rows="5"
                    [(ngModel)]="mydata" 
                    [name]="'something' + in" 
                    placeholder="Type..."
                    (ngModelChange)="mychange($event)"></textarea>

</div>

TS:

export class AppComponent {
  remainingText:number;
  mydata: string = '';

    mychange(val) {
      this.remainingText = 1000 - val.length;
      console.log(this.remainingText);
   }
}

Demo code of StackBlitz.

Upvotes: 1

peinearydevelopment
peinearydevelopment

Reputation: 11464

The question is lacking a ton of context, making it a bit hard to answer, but as asked, the following should provide a solution for your immediate problem.

There are different ways of dealing with forms in Angular. It appears as though you are using the Reactive Forms module, but you don't include your whole form or the backing .ts file. To truly answer your question in the context you are executing it in, those files would need to be included more fully. For instance, how are you creating your form group? How are the form controls being created?, etc

1000 - undefined will give the answer NaN in JavaScript as will 1000 - {}, with the code you have provided it is hard to tell which scenario you are facing.

.html

<textarea #text (input)="checkChange(text.value)"></textarea>

.ts

  checkChange(value: string) {
    console.log(value.length);
  }

Working StackBlitz example.

Upvotes: 0

Related Questions