ngModel for textarea not working in angular 2

Question

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?

`rapidPage.key` target the key in the object. can you post the object? — Jai, May 20 '16 at 12:39

Ankit Singh · Accepted Answer · 2020-03-16T19:56:04.450

37

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>

edited Mar 16 '20 at 19:56

answered May 20 '16 at 12:52

Ankit Singh

24,525
11
66
89

i got the output correctly.thanks.is there any way to indent this json object because series of characters is too mainstream. – Bhushan Gadekar May 20 '16 at 12:59
you'll have to use a code beutifier plugin of some short to achieve that, I haven't done anything like this before, there might be some `api`s too that might provide you with formatted json on just one api call. – Ankit Singh May 20 '16 at 13:02
beautification is possible with JSON.stringify as well, I updated my answer and plunker. see [this question](http://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically) too. – Ankit Singh May 20 '16 at 13:08
1

Already did that. :) I am novice in angular2,if possible can you share any details of your social profile.would like to learn from you. :) – Bhushan Gadekar May 20 '16 at 13:08
1

Unrealistically true, I am not active on any social network anymore, But I visit stackoverflow everyday. You can just post your questions and I'll try my best. you can find my mail on SO profile. Thanks for your kind consideration, but SO has much more talented and active people than me. – Ankit Singh May 20 '16 at 13:12

Hasnain Ali Sohrani · Answer 2 · 2019-05-13T02:12:52.333

20

<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%!.

edited May 13 '19 at 02:12

answered Jan 07 '19 at 10:36

Hasnain Ali Sohrani

385
5
11

3

Great answer. A bit strange, but apparently the `[(ngModel)]` thing doesn't work without a `name` attribute. - Having said that, I found the `#message='ngModel'` in your answer a bit confusing, as this seems unnecessary and seems to make no difference. – bvdb Feb 23 '19 at 21:16
2

my text area [formControl] binding didn't work until I added name attribute. thanks! – ihor.eth Oct 21 '19 at 15:50
1

I agree with @ihorbond. Same for me. – Sharmila Jun 05 '20 at 09:38
1

Not working on Angular 9, here is my error message : `Cannot assign value "$event" to template variable "message". Template variables are read-only.` – jpmottin Jul 08 '20 at 05:07

score 14 · Answer 3 · answered Jan 09 '17 at 14:10

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

score 7 · Answer 4 · answered Sep 15 '19 at 21:09

7

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>

answered Sep 15 '19 at 21:09

Anand Rockzz

6,072
5
64
71

Thank you! The fact that ngModel only works inside a form is what I was missing. – someone Dec 13 '22 at 17:11

windmaomao · Answer 5 · 2018-03-14T13:46:46.173

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.

edited Mar 14 '18 at 13:46

answered Mar 14 '18 at 12:56

windmaomao

7,120
2
32
36

Great answer! This is simple and easily works. No funny ([ngModel]) business. – Alan Richards Feb 09 '21 at 20:05

score 2 · Answer 6 · answered Jul 26 '18 at 20:57

2

Can you test with this:

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

Regards

answered Jul 26 '18 at 20:57

Oscar Adrian Luevano Cadena

29
1

An explanation as to why this code works or what changes you had to make and why would be helpful to the person who originally asked the question. – Scotty Waggoner Jul 26 '18 at 21:36
Should have added a fiddle with your code. This is not even an answer. – retr0 May 28 '21 at 09:23

score 1 · Answer 7 · answered May 20 '16 at 12:47

As per documentation [()] is for two way syntax sugar to remove the boilerplate. What event is being invoked at this? Irrespective, you can put a string output also alongwith the event in below code

Probably try the below code implemetation for your string output

@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
}

score 0 · Answer 8 · answered May 20 '16 at 12:48

You can stringify your json and use in the 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

Browser shows [object object] because angular unables to parse the JSON the asign the value in ngModel you must need a string so convert this using JSON.stringify

score 0 · Answer 9 · answered Jul 29 '22 at 01:00

0

I find that importing FormsModule from @angular/forms solves the issue.

In app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    FormsModule
  ],
...
})

answered Jul 29 '22 at 01:00

CodePerson71495

69
1
4

ngModel for textarea not working in angular 2

9 Answers9

Template

Component

Linked