Использование каналов в ngModel для элементов INPUT в Angular

У меня есть поле ВВОДА 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" />

Пример Plunker

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

Решением здесь является разделение привязки на одностороннюю привязку и привязку событий, которые [(ngModel)]фактически охватывает синтаксис . []синтаксис односторонней привязки и синтаксис ()привязки событий. При совместном использовании - [()]Angular распознает это как сокращение и связывает двустороннюю привязку в форме односторонней привязки и привязки события к значению объекта компонента.

Причина, по которой вы не можете использовать [()]канал, заключается в том, что каналы работают только с односторонними привязками. Следовательно, вы должны разделить канал, чтобы работать только с односторонней привязкой и обрабатывать событие отдельно.

Смотрите Angular Template Syntax для получения дополнительной информации.

<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 -> change on blur, потому что 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();
  }

Мое решение приведено ниже здесь 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">

вы должны использовать [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);
}

будет хорошо, если есть лучшее решение для предотвращения этой ошибки.