web-dev-qa-db-fra.com

Obtenir la saisie de l'utilisateur de textarea

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 dans str dans mon composant. Y a-t-il une erreur dans la façon dont j'utilise ngModule?

data-bindingangulartextareaangular-ngmodel
47
Maryam
<pre>
  <input type="text"  #titleInput>
  <button type="submit" (click) = 'addTodo(titleInput.value)'>Add</button>
</pre>

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

Je pense que vous ne devriez pas utiliser d'espaces entre la [(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.

31
KaFu

Testé avec Angular2 RC2

J'ai essayé un extrait de code similaire 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);
  }
}
8
peter z.

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 <textarea>),

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

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`;
  }
}
3
valentasm
<div>    
  <input type="text" [(ngModel)]="str" name="str">
</div>

Mais vous devez avoir la variable nommée str sur le back-end, pour que cela fonctionne correctement.

1
chavy