Search code examples
angulartextareangmodel

ngModel makes prepopulation of input box stop working

I have an angular component which provides input box to enter a comment. I initially had as:

<textarea class="comment-box" type="text" name="comment" value="{{_input.comment}}"></textarea>

This causes comment box to be pre-populated with existing value of comment, if there is any. It works fine.

Now I add ngModel for 2 way binding as:

<textarea class="comment-box" type="text" name="comment" [ngModel]="comment" (ngModelChange)="handleCommentChange($event)"
          value="{{_input.comment}}"></textarea>

Now when comment is modified, handleCommentChange in component is called. It works, but the pre-population of textarea is no more working and textarea is empty even if comment has an initial value when component loads.

How to have both functionalities at same time?

Solution

  • Pls change from 

    [ngModel]="comment"

    to

    [ngModel]="_input.comment"

    Also I think you don't need 

    value="{{_input.comment}}"