Question

1

ngModel for textarea not working in angular 2

rated 0 times [ 5] [ 4] / answers: 1 / hits: 138617 / 8 Years ago, fri, may 20, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rossthomasn

Add To Favorites

Follow

Total Points: 122

Total Questions: 78

Total Answers: 105

Location: South Georgia

Member since Sun, Aug 8, 2021

3 Years ago

answered 8 Years ago catrinas · Accepted Answer

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>