Angular 8 - Как использовать каналы на входе с 2-х сторонней привязкой данных?

Question

Я относительный новичок, когда речь заходит об Angular, и я создаю приложение для Angular, и я стараюсь отформатировать поле ввода, в котором пользователь вводит свой доход, и его необходимо отформатировать так, чтобы у него обоих был символ GBP перед ним и с запятыми, разделяющими значение на тысячи.

Так, например, пользователь добавляет свой доход как 34000 , и он будет отображаться как £ 34000

Я пытаюсь использовать каналы, чтобы помочь мне достичь этого, и я пытался использовать CurrencyPipe и обычные Pipes, и у меня возникают одинаковые проблемы с обоими. Так, например, с номером трубы у меня будет:

<input type="number" (change)="getApp1income()" (keyup)="getApp1income()" [(ngModel)]="app1income | number" [ngModelOptions]="{standalone: true}" min="0" step="500" data-number-to-fixed="2" data-number-stepfactor="500" />

Однако, это дает мне следующую ошибку:

Uncaught Error: Template parse errors:
Parser Error: Cannot have a pipe in an action expression at column 14 in [app1income | number=$event]

Я получу ту же ошибку при использовании CurrencyPipe. Я думаю, что это связано с тем фактом, что ngModel использует двухстороннее связывание данных, поскольку я использую значение, введенное в другом месте. Но мне кажется, что я не могу найти решения вообще, и я рассмотрел различные подобные проблемы, как здесь, так и в других местах.

Буду признателен за любую помощь.

Answer 1

Если вы хотите использовать для этого стороннюю библиотеку, вы можете использовать ng2-currency-mask

1. npm install ng2-currency-mask --save
2. Добавьте CurrencyMaskModule к массиву imports Модуля, в котором вы хотите его использовать.
3. Используйте его следующим образом: <input currencyMask [(ngModel)]="value" [options]="{ prefix: '£ ', thousands: ',', precision: 0 }"/>

---

Вот Рабочий образец StackBlitz для вашей ссылки.

Answer 2

Я бы порекомендовал использовать маску ngx: https://www.npmjs.com/package/ngx-mask
Он довольно прост в использовании и имеет много примеров на своей странице:
https://jsdaddy.github.io/ngx-mask-page/main

В вашем случае это будет: <input type='text' prefix="£" mask="comma_separator.2" > Затем разберитесь в наборе номера в вашем коде

Answer 3

К сожалению, как вы уже догадались, вы не можете использовать каналы с двухсторонними привязками ngModel.Это по замыслу.

Вы можете заставить его работать так:

[ngModel]="app1income | number" (ngModelChange)="app1income =$event"