ngModel for textarea not working in angular 2

Question

I am trying to print json object in textarea using ngModel.

I have done following:

<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">                              </textarea> 

I want to load the json object in textarea. The above code is loading the rapidPage object in textarea but its showing textarea value as [object Object].

object:

 this.rapidPage = {                     "pageRows": [             {                 "sections": [                     {                         "sectionRows": [                             {                                 "secRowColumns": [                                                                        ]                             },                             {                                 "secRowColumns": [                                     {                                         "colName": "users"                                     }                                 ]                             },                             {                                 "secRowColumns": [                                     {                                         "colName": "sample"                                     }                                 ]                             }                         ],                         "width": 0                     }                 ]             }         ],         "pageName": "DefaultPage",         "pageLayout": "DEFAULT_LAYOUT",         "editMode": true     }; 

I want to load the data as string. any inputs?

Answer 1

Assuming that you want to bind rapidPage as it is and will only write valid JSON in the textArea.

• You need to PARSE it when changing the value, and STRINGIFY when showing in textarea.

---

StackBlitz DEMO

Do the following in your Component code

  rapidPage = {"pageRows":[{"sections":[{"sectionRows":[{"secRowColumns":[]},{"secRowColumns":[{"colName":"users"}]},{"secRowColumns":[{"colName":"sample"}]}],"width":0}]}],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true};    // your object    get rapidPageValue () {     return JSON.stringify(this.rapidPage, null, 2);   }    set rapidPageValue (v) {     try{     this.rapidPage = JSON.parse(v);}     catch(e) {       console.log('error occored while you were typing the JSON');     };   } 

Template Usage:

<textarea [(ngModel)]='rapidPageValue' rows="30" cols="120">                              </textarea> 

Answer 2

<textarea class="form-control"            name="message"           rows="8"           [(ngModel)]="Obj.message"           #message='ngModel'           ></textarea> 

for Two way binding You just need to add attribute in textarea tag name="message", ONLY [(ngModel)] works 100%!.