ใช้ท่อภายใน ngModel กับองค์ประกอบ INPUT ในเชิงมุม

ฉันมีช่องป้อน 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

เช่นเดียวกับการแสดงเทมเพลตข้อความสั่งเทมเพลตจะใช้ภาษาที่ดูเหมือน JavaScript เครื่องมือแยกวิเคราะห์คำสั่งเทมเพลตแตกต่างจากเครื่องมือแยกวิเคราะห์นิพจน์แม่แบบและสนับสนุนทั้งการกำหนดพื้นฐาน (=) และนิพจน์ผูกมัด (ด้วย; หรือ,) โดยเฉพาะ

อย่างไรก็ตามไม่อนุญาตให้ใช้ JavaScript ของไวยากรณ์:

• ใหม่
• ตัวดำเนินการที่เพิ่มขึ้นและลดลง ++ และ -
• การมอบหมายโอเปอเรเตอร์เช่น + = และ - =
• ผู้ประกอบการระดับบิต และ
• ผู้ประกอบการแสดงออกแม่แบบ

ดังนั้นคุณควรเขียนดังนี้

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

ตัวอย่างพลั่ว

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

วิธีแก้ปัญหาที่นี่คือการแยกการเชื่อมโยงเป็นการเชื่อมโยงทางเดียวและการผูกเหตุการณ์ - ซึ่งไวยากรณ์[(ngModel)]จริง ๆ แล้วไซเบอร์ []เป็นไวยากรณ์การเชื่อมโยงทางเดียวและ()เป็นไวยากรณ์การเชื่อมโยงเหตุการณ์ เมื่อใช้ร่วมกัน -[()] Angular จดจำสิ่งนี้ว่าเป็นการจดชวเลขและเชื่อมโยงการผูกมัดแบบสองทางในรูปแบบของการเชื่อมโยงทางเดียวและเหตุการณ์ผูกกับค่าวัตถุส่วนประกอบ

เหตุผลที่คุณไม่สามารถใช้ [()]กับไปป์นั้นได้เพราะไพพ์ทำงานได้กับการผูกทางเดียวเท่านั้น ดังนั้นคุณจะต้องแยกออกไปป์เพื่อใช้งานในการผูกทางเดียวและจัดการเหตุการณ์แยกต่างหาก

ดูไวยากรณ์เทมเพลตเชิงมุมสำหรับข้อมูลเพิ่มเติม

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

ฉันต้องการเพิ่มอีกหนึ่งจุดให้กับคำตอบที่ยอมรับได้

ถ้าประเภทของอินพุตควบคุมของคุณไม่ใช่ข้อความไพพ์จะไม่ทำงาน

เก็บไว้ในใจและประหยัดเวลาของคุณ

ฉันลองวิธีแก้ปัญหาข้างต้นแล้วค่าที่ไปยังแบบจำลองนั้นเป็นค่าที่จัดรูปแบบแล้วส่งคืนและให้ข้อผิดพลาด currencyPipe ให้ฉัน ดังนั้นฉันต้อง

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

โซลูชันของฉันมีให้ที่นี่ด้านล่างค้นหารายละเอียดเป็นวัตถุ ..

<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">

คุณต้องใช้ [ngModel] แทนการผูกสองทางกับ [(ngModel)] จากนั้นใช้เหตุการณ์การเปลี่ยนแปลงด้วยตนเองด้วย (ngModelChange) นี่เป็นกฎสาธารณะสำหรับอินพุตทั้งสองทางในส่วนประกอบ

เพราะไปป์ในอีซีเตอร์ของเหตุการณ์ผิดไป

เนื่องจากการรวมสองทางเพื่อป้องกันข้อผิดพลาดของ:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

คุณสามารถเรียกใช้ฟังก์ชั่นเพื่อเปลี่ยนรูปแบบเช่นนี้:

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


import { UseMyPipeToFormatThatValuePipe } from './path';

constructor({
    private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})

getNewValue(ev: any): any {
    item.value= this.useMyPipeToFormatThatValue.transform(ev);
}

มันจะดีถ้ามีทางออกที่ดีกว่าเพื่อป้องกันข้อผิดพลาดนี้