कोणीय 2 इनपुट इनपुट मान प्राप्त कर रहे हैं

Question

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

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

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

str: string; 
//some logic on str 

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

Answer 1

Angular2 RC2 के साथ परीक्षण किया गया

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

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

Answer 2

मुझे लगता है कि आप [(ngModel)]= और str के बीच रिक्त स्थान का उपयोग नहीं करना चाहिए। फिर आपको एक बटन या किसी क्लिक फ़ंक्शन के साथ ऐसा कुछ उपयोग करना चाहिए और इस फ़ंक्शन में आप अपने inputfields के मानों का उपयोग कर सकते हैं।

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

और अपने घटक फ़ाइल

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

आशा क्या मैं आपकी मदद कर सकता है।

Answer 3

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

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

Answer 4

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

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

Answer 5

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

लेकिन आप चरनाम दिया करने की जरूरत है 0 बैक एंड पर, इसके ठीक काम करने की तुलना में।

Answer 6

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

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