Obtenir une entrée utilisateur de textarea

Question

Je suis nouveau sur angular2. Je souhaite stocker les entrées utilisateur d'une zone de texte dans une variable de mon composant afin d'appliquer une logique à cette entrée. J'ai essayé ngModel mais cela ne fonctionne pas. Mon code pour la zone de texte:

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

Et à l'intérieur de mon composant:

 str: string;
//some logic on str
 

Mais je n’obtiens aucune valeur en str dans ma composante. Existe-t-il une erreur dans la façon dont j'utilise ngModule ?

Answer 1

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

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

Answer 2

Je pense que vous ne devriez pas utiliser d'espaces entre [(ngModel)] le = et le str . Ensuite, vous devriez utiliser un bouton ou quelque chose comme ceci avec une fonction de clic et dans cette fonction, vous pouvez utiliser les valeurs de votre inputfields .

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

et dans votre fichier de composant

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

J'espère que je peux vous aider.

Answer 3

Testé avec Angular2 RC2

J'ai essayé un extrait de code semblable au vôtre et cela fonctionne pour moi;) voir [(ngModel)] = = str dans mon modèle Si vous appuyez sur le bouton, la console enregistre le contenu actuel du champ textarea. J'espère que ça aide

textarea-composant.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);
  }
}
 

Answer 4

Juste au cas où, au lieu de [(ngModel)] vous pouvez utiliser (input) ( est déclenché lorsqu'un utilisateur écrit quelque chose dans l'entrée <textarea> ) ou (blur) ( est déclenché lorsqu'un utilisateur quitte l' événement d' entrée <textarea> ),

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

Answer 5

Voici un exemple de composant complet

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