ngModel for textarea not working in angular 2
Solution 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, andSTRINGIFY
when showing in textarea.
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>
Solution 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%!.
Solution 3
For binding textarea values in Angular 2 you can use the change-function:
Template
<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea>
Component
export class AppComponent implements OnInit {
private textareaValue = '';
doTextareaValueChange(ev) {
try {
this.textareaValue = ev.target.value;
} catch(e) {
console.info('could not set textarea-value');
}
}
}
Solution 4
ngModel works if
- There is a form wrapped around it & textarea has a name attribute added to it.
If you not you can use the following syntax to achieve the same effect
<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>
Solution 5
Unless you really want to have sync in between, you would normally implement a button to save/apply the change when it's finished json editing. If that is the case, your render is easy.
<textarea #textbox>{{ rapidPage | json }}</textarea>
Make sure no other space or return character in between the above line.
Then an traditional button, ex.
<a (click)="updateRapidPage(textbox.value)">Apply</a>
I found this is better in some case than brutal [(rapidPage)]
.
You can also use @ViewChild('textbox') input
inside the component to access this variable.
Bhushan Gadekar
#angular #nodejs #docker #elasticsearch #springboot #java #jenkins #linux
Updated on March 17, 2020Comments
-
Bhushan Gadekar over 4 years
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?