Assuming that you want to bind rapidPage as it is and will only write valid JSON in the textArea.
- You need to
PARSEit when changing the value, andSTRINGIFYwhen 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>