ngModel for textarea not working in angular 2

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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)