data binding - Textarea से उपयोगकर्ता इनपुट प्राप्त करें




data-binding angular (4)

Angular2 आरसी 2 के साथ परीक्षण किया

मैंने आपके जैसा कोड-स्निपेट की कोशिश की और यह मेरे लिए काम करता है;) मेरे टेम्पलेट में [(ngModel)] = "str" ​​देखें यदि आप बटन दबाते हैं, तो कंसोल टेक्स्टरेरा-फ़ील्ड की वर्तमान सामग्री लॉग करता है। आशा करता हूँ की ये काम करेगा

पाठ क्षेत्र-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);
  }
}

मैं angular2 के लिए नया हूँ। मैं अपने घटक में एक चर में एक टेक्स्ट क्षेत्र से उपयोगकर्ता इनपुट स्टोर करना चाहता हूं ताकि मैं इस इनपुट में कुछ तर्क लागू कर सकूं। मैंने ngModel की कोशिश की लेकिन यह काम नहीं करता है। Textarea के लिए मेरा कोड:

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

और मेरे घटक के अंदर:

str: string;
//some logic on str

लेकिन मुझे अपने घटक के अंदर str में कोई मूल्य नहीं मिलता है। क्या मैं ngModule का उपयोग कर रहा हूं जिस तरह से कोई त्रुटि है?


बस मामले में, [(ngModel)] बजाय [(ngModel)] आप (input) उपयोग कर सकते हैं (input) जब कोई उपयोगकर्ता इनपुट <textarea> ) में कुछ लिखता है या (blur) निकाल दिया जाता है ( जब उपयोगकर्ता इनपुट <textarea> ) ईवेंट छोड़ देता है तो निकाल दिया जाता है ,

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

यहां पूर्ण घटक उदाहरण है

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>

लेकिन आपको ठीक काम करने की तुलना में बैक एंड पर str नामक चर होना चाहिए।







angular-ngmodel