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    lt textarea cols  30  rows  4    ngModel      str  gt  lt  textarea gt    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

User · Answer

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

User · Answer

lt pre gt     lt input type  text    titleInput gt     lt button type  submit   click     addTodo titleInput value   gt Add lt  button gt   lt  pre gt       addTodo title string        console log title

User · Answer

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    lt input id  str    ngModel    str   gt   lt button  click   sendValues    gt Send lt  button gt    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

User · Answer

Remove the spaces around your      lt div gt         lt input type  text    ngModel    str  name  str  gt   lt  div gt    But you need to have the variable named str on back-end  than its should work fine

User · Answer

Just in case  instead of   ngModel   you can use  input   is fired when a user writes something in the input  lt textarea gt   or  blur   is fired when a user leaves the input  lt textarea gt   event    lt textarea cols  30  rows  4   input   str    event target value  gt  lt  textarea gt

User · Answer

Here is full component example  import   Component   from   angular core     Component     selector   app-text-box     template             lt h1 gt Text    textValue    lt  h1 gt           lt input  textbox type  text    ngModel    textValue  required gt           lt button  click   logText textbox value   gt Update Log lt  button gt           lt button  click   textValue     gt Clear lt  button gt            lt h2 gt Template Reference Variable lt  h2 gt          Type     textbox type     required     textbox hasAttribute  required               upper     textbox value toUpperCase                lt h2 gt Log  lt button  click   log     gt Clear lt  button gt  lt  h2 gt           lt pre gt   log   lt  pre gt      export class TextComponent      textValue    initial value     log          logText value  string   void       this log     Text changed to    value   n

[data-binding] Get user input from textarea

Examples related to data-binding

Examples related to angular

Examples related to textarea

Examples related to angular-ngmodel