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




pipe html-input (4)

मैंने ऊपर दिए गए समाधानों का प्रयास किया है, फिर भी मॉडल पर जाने वाले मान स्वरूपित मान थे और फिर मुझे मुद्रा पाइप त्रुटियां लौट रहे थे। तो मुझे करना था

  [ngModel]="transfer.amount | currency:'USD':true"
                                   (blur)="addToAmount($event.target.value)"
                                   (keypress)="validateOnlyNumbers($event)"

और addToAmount के कार्य पर -> धुंध के कारण बदलना ngModelChange मुझे कर्सर के मुद्दों दे रहा था।

removeCurrencyPipeFormat(formatedNumber){
    return formatedNumber.replace(/[$,]/g,"")
  }

और अन्य गैर संख्यात्मक मूल्यों को हटा रहा है।

validateOnlyNumbers(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }

मेरे पास एक HTML इनपुट क्षेत्र है।

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

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

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

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

एक क्रिया अभिव्यक्ति में एक पाइप नहीं हो सकता है

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


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

(ngModelChange)="Template statements"

(ngModelChange) = "item.value | useMyPipeToFormatThatValue = $ event"

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

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

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

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

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

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

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


मेरा समाधान यहां नीचे दिया गया है खोज करें एक वस्तु है ..

<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 | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

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

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

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





angular2-ngmodel