Использование труб в ngModel на входных элементах в угловой

Question

Использование труб в ngModel на входных элементах в угловой

у меня есть поле ввода HTML.

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

и я хочу отформатировать его значение и использовать существующий канал:

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

и получаем сообщение об ошибке:

не может иметь канал в выражении действия

Как я могу использовать трубы в этом контексте?

553 5

angular pipe html-input angular2-ngmodel

5 ответов:

Comments

Ничего не найдено.

yurzui · Accepted Answer · 2018-06-08 14:09:12

вы не можете использовать операторы выражения шаблона(труба, сохранить навигатор) в заявлении шаблона:
(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

KnowHoper · Accepted Answer · 2017-02-06 22:54:54

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />
решение здесь состоит в том, чтобы разделить привязку на одностороннюю привязку и привязку событий-что синтаксис [(ngModel)] на самом деле включает в себя. [] является односторонним синтаксисом привязки и () синтаксис привязки событий. При совместном использовании - [()] Angular распознает это как сокращение и связывает двустороннюю привязку в виде односторонней привязки и привязки события к значению компонентного объекта.

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

Посмотреть Угловые Синтаксис Шаблона для получения дополнительной информации.

cabaji99 · Accepted Answer · 2017-08-25 22:14:06

Я пробовал решения выше, но значение, которое идет в модель, было форматированным значением, а затем возвращалось и давало мне ошибки 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();
  }

Tibin Thomas · Accepted Answer · 2018-08-21 14:55:00

<input [ngModel]="item.value | currency" (ngModelChange)="item.value=$event"
name="name" type="text" />
Я хотел бы добавить еще один пункт в принятой ответ.

Если тип вашего входного элемента управления не является текстом, труба не будет работать.

имейте это в виду и сэкономить ваше время.

Bhasker The Navigator · Accepted Answer · 2018-01-04 11:54:42

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