angular - कोणीय में INPUT तत्वों पर ngModel के भीतर पाइप का उपयोग करना




pipe html-input (4)

मेरे पास एक HTML INPUT फ़ील्ड है।

<input 
    [(ngModel)]="item.value" 
    name="inputField" 
    type="text" 
/>

और मैं इसके मूल्य को प्रारूपित करना चाहता हूं और मौजूदा पाइप का उपयोग करना चाहता हूं:

.... 
[(ngModel)]="item.value | useMyPipeToFormatThatValue" 
....

और त्रुटि संदेश प्राप्त करें:

एक्शन एक्सप्रेशन में पाइप नहीं हो सकता

मैं इस संदर्भ में पाइप का उपयोग कैसे कर सकता हूं?


आप टेम्प्लेट स्टेटमेंट में टेम्प्लेट एक्सप्रेशन ऑपरेटर्स (पाइप, सेव नाविक) का उपयोग नहीं कर सकते हैं:

(ngModelChange)="Template statements"

(ngModelChange) = "item.value | उपयोगमाइपिपेटोफोर्मैटट व्हाट्सएव = अन्य ईवेंट"

https://angular.io/guide/template-syntax#template-statements

टेम्पलेट अभिव्यक्तियों की तरह, टेम्पलेट स्टेटमेंट एक भाषा का उपयोग करते हैं जो जावास्क्रिप्ट की तरह दिखाई देती है। टेम्प्लेट स्टेटमेंट पार्सर टेम्प्लेट एक्सप्रेशन पार्सर से भिन्न होता है और विशेष रूप से बेसिक असाइनमेंट (=) और चेनिंग एक्सप्रेशंस (साथ; या;) दोनों को सपोर्ट करता है।

हालाँकि, कुछ जावास्क्रिप्ट सिंटैक्स की अनुमति नहीं है :

  • नया
  • वेतन वृद्धि और वेतन वृद्धि ऑपरेटरों, ++ और -
  • ऑपरेटर असाइनमेंट, जैसे + = और - =
  • बिटवाइज ऑपरेटर्स | तथा &
  • टेम्पलेट अभिव्यक्ति ऑपरेटरों

इसलिए आपको इसे इस प्रकार लिखना चाहिए:

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

प्लंकर उदाहरण


मेरा समाधान नीचे दिया गया है यहां searchDetail एक ऑब्जेक्ट है ..

<p-calendar  [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'"  (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar>

<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json"  (ngModelChange)="searchDetail.systems=$event" required='true' name="systems"
            placeholder="Enter the Systems">

<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />

मैं स्वीकृत उत्तर में एक और बिंदु जोड़ना चाहूंगा।

यदि आपके इनपुट नियंत्रण का प्रकार टेक्स्ट नहीं है तो पाइप काम नहीं करेगा।

इसे ध्यान में रखें और अपना समय बचाएं।


<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

इसका समाधान यह है कि बाइंडिंग को एक-तरफ़ा बाइंडिंग और एक ईवेंट बाइंडिंग में विभाजित किया जाए - जो कि सिंटैक्स [(ngModel)] वास्तव में शामिल है। [] एक तरफ़ा बाइंडिंग सिंटैक्स और () ईवेंट बाइंडिंग सिंटैक्स है। जब एक साथ इस्तेमाल किया जाता है - [()] एंगुलर इसे शॉर्टहैंड के रूप में पहचानता है और एक-तरफ़ा बाइंडिंग के रूप में दो-तरफ़ा बाइंडिंग और एक कंपोनेंट ऑब्जेक्ट वैल्यू के लिए बाइंडिंग इवेंट बनाता है।

पाइप के साथ आप [()] उपयोग नहीं कर सकते इसका कारण यह है कि पाइप केवल एक-तरफ़ा बाइंडिंग के साथ काम करते हैं। इसलिए आपको केवल एक-तरफ़ा बाइंडिंग पर काम करने के लिए पाइप को अलग करना होगा और घटना को अलग से संभालना होगा।

अधिक जानकारी के लिए कोणीय टेम्पलेट सिंटैक्स देखें।





angular2-ngmodel