NgModel for a text field not working in angular2

Question

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

I have done the following:

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

I want to load a json object in textarea. The above code loads the rapidPage object in textarea, but shows the value of textarea as [object Object] .

an 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 data as a string. any inputs?

Answer 1

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

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

---

Plunker demo

Follow these steps in the 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'); }; } 

Using the template:

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

Answer 2

To bind 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'); } } } 

Answer 3

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

For two-way binding, you just need to add the attribute to the textarea name="message" tag, ONLY [(ngModel)] works 100%!.

Answer 4

If you really want to synchronize with each other, you will usually use the button to save / apply the changes when you finish json editing. If so, your render is easy.

 <textarea #textbox>{{ rapidPage | json }}</textarea> 

Make sure that there is no other space or return character between the specified line.

Then a traditional button, for example.

 <a (click)="updateRapidPage(textbox.value)">Apply</a> 

I have found that at best it is better than cruel [(rapidPage)] .

You can also use @ViewChild('textbox') input inside the component to access this variable.

Answer 5

Can you check this out:

 <textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea> 

Yours faithfully

Answer 6

According to the documentation [()], for a two-way syntactic sugar, the template is deleted. What event is triggered in this case? Regardless, you can put the output of a string also along with the event in the lower code

Maybe try the following code sequence to output a line

 @Directive({ selector: '[ngModel]', host: { "[value]": 'ngModel', "(input)": "ngModelChange.next($event.target.value)" } }) class NgModelDirective { @Input() ngModel:any; // stored value @Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter } 

Answer 7

You can stringify use json and use in ngModel like this, -

 <textarea style="height:100px; width:300px;background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120"> </textarea> ArrayDemo: Array<any> = [{"name":"pardeep","last":"jain"}] rapidPage = JSON.stringify(this.ArrayDemo); 

Working example Working example

The browser shows [object object] because angular does not allow parsing JSON in order to assign a value in ngModel, you will need a string so convert this using JSON.stringify