Get user input from textarea

Question

I'm new to angular2. I want to store user input from a text area in a variable in my component so I can apply some logic to this input. I tried ngModel but it doesn't work. My code for the textarea:

<textarea cols="30" rows="4" [(ngModel)] = "str"></textarea>

And inside my component:

str: string;
//some logic on str

But I don't get any value in str inside my component. Is there an error with the way I'm using ngModule ?

I don't think spaces are aloud in between angular properties and values. That may explain the issue — Richard Hamilton, Jun 19 '16 at 02:33

score 90 · Answer 1 · edited Oct 10 '16 at 16:59

90

<pre>
  <input type="text"  #titleInput>
  <button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button>
</pre>

{
  addTodo(title:string) {
    console.log(title);
  }
}

edited Oct 10 '16 at 16:59

hveiga

6,725
7
54
78

answered Oct 10 '16 at 13:19

Arthur Qocharyan

928
6
9

2

In which scope can I use the titleInput ID? I had a workin example like this and rearranged code for styling issues but know it says: Cannot read 'value' of undefined – Michael L. Sep 05 '17 at 07:51
This is more of a workaround of using the input tag when the author wants the textarea tag. – Mohammed Shoaib Oct 04 '20 at 14:32

score 34 · Answer 2 · edited Feb 21 '18 at 11:56

I think you should not use spaces between the [(ngModel)] the = and the str. Then you should use a button or something like this with a click function and in this function you can use the values of your inputfields.

<input id="str" [(ngModel)]="str"/>
<button (click)="sendValues()">Send</button>

and in your component file

str: string;
sendValues(): void {
//do sth with the str e.g. console.log(this.str);
}

Hope I can help you.

score 14 · Answer 3 · answered Jun 18 '16 at 15:51

Tested with Angular2 RC2

I tried a code-snippet similar to yours and it works for me ;) see [(ngModel)] = "str" in my template If you push the button, the console logs the current content of the textarea-field. Hope it helps

textarea-component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'textarea-comp',
  template: `
      <textarea cols="30" rows="4" [(ngModel)] = "str"></textarea>
      <p><button (click)="pushMe()">pushMeToLog</button></p>
  `
})

  export class TextAreaComponent {
    str: string;

  pushMe() {
      console.log( "TextAreaComponent::str: " + this.str);
  }
}

score 11 · Answer 4 · answered Sep 24 '17 at 19:35

11

Just in case, instead of [(ngModel)] you can use (input) (is fired when a user writes something in the input <textarea>) or (blur) (is fired when a user leaves the input <textarea>) event,

<textarea cols="30" rows="4" (input)="str = $event.target.value"></textarea>

answered Sep 24 '17 at 19:35

Yas

4,957
2
41
24

What if we want to an input field where we want to have prefilled value as well we want to access that input field in component. Can we do that? – Always_a_learner Jul 04 '18 at 12:24
Isn't it possible to bind the value without using (input)? – Mohammed Shoaib Oct 04 '20 at 14:32

score 3 · Answer 5 · answered Nov 24 '17 at 17:14

Here is full component example

import { Component } from '@angular/core';

@Component({
  selector: 'app-text-box',
  template: `
        <h1>Text ({{textValue}})</h1>
        <input #textbox type="text" [(ngModel)]="textValue" required>
        <button (click)="logText(textbox.value)">Update Log</button>
        <button (click)="textValue=''">Clear</button>

        <h2>Template Reference Variable</h2>
        Type: '{{textbox.type}}', required: '{{textbox.hasAttribute('required')}}',
        upper: '{{textbox.value.toUpperCase()}}'

        <h2>Log <button (click)="log=''">Clear</button></h2>
        <pre>{{log}}</pre>`
})
export class TextComponent {

  textValue = 'initial value';
  log = '';

  logText(value: string): void {
    this.log += `Text changed to '${value}'\n`;
  }
}

score 1 · Answer 6 · edited Nov 14 '19 at 04:08

1

Remove the spaces around your =:

<div>    
  <input type="text" [(ngModel)]="str" name="str">
</div>

But you need to have the variable named str on back-end, than its should work fine.

edited Nov 14 '19 at 04:08

LHM

721
12
31

answered Oct 30 '17 at 10:49

chavy

841
10
20

score 0 · Answer 7 · answered Jun 02 '21 at 06:39

If ngModel is used within a form tag, either the name attribute must be set or the form. control must be defined as 'standalone' in ngModelOptions.

use either of these two:

<textarea [(ngModel)]="person.firstName" name="first"></textarea>

<textarea [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}"></textarea>

it worked for me.

Get user input from textarea

7 Answers7

Linked