data binding type Obtenir les entrées de l'utilisateur de textarea




textarea php (5)

Je pense que vous ne devriez pas utiliser d'espaces entre le [(ngModel)] le = et le str . Ensuite, vous devriez utiliser un bouton ou quelque chose comme ça avec une fonction de clic et dans cette fonction, vous pouvez utiliser les valeurs de vos 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.

Je suis nouveau à angular2. Je souhaite stocker les entrées utilisateur d'une zone de texte dans une variable de mon composant afin de pouvoir appliquer une logique à cette entrée. J'ai essayé ngModel mais ça ne marche 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'ai aucune valeur dans str intérieur de mon composant. Y a-t-il une erreur dans la façon dont j'utilise ngModule ?


Testé avec Angular2 RC2

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

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

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'entrée <textarea> ) ,

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

Voici un exemple complet de composant

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

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

Mais vous devez avoir la variable nommée str sur le back-end, cela devrait fonctionner correctement.





angular-ngmodel