Привязка ngModel вместо значения к пользовательской директиве Angular для ввода валюты
В настоящее время я использую пользовательскую директиву формата mat-input-currency для автоматического форматирования входных данных поля в валюту. репозиторий npm находится здесь.
Однако директива привязывает данные элемента к [value] ввода i, и мне нужно двусторонне привязать его к [(ngModel)] привязка работает, но отображение формата валюты не отображается при первой загрузке, только при нажатии на ввод, а затем становится размытым. однако привязка его к [value] отображает его в формате валюты при загрузке.
Вот StackBlitz Я сделал форк из Демо Я попытался написать функцию, возможно, для подключения к событию загрузки для ввода, но не знаю, как это сделать. есть ли способ загрузить его с отформатированным ngModel? событие, похоже, не начинается при загрузке.
<mat-form-field *ngIf = "mpPatient.ssissdiawardLetter=='Y'" appearance = "standard">
<mat-label>SSI/SSDI Award Amount</mat-label>
<input matInput type = "text"
(onload) = "onLoadCurrencyEvent($event, mpPatient.ssissdiawardAmount)"
mvndrMatCurrencyFormat [allowNegative] = "false" [currencyCode] = "'USD'"
[(ngModel)] = "mpPatient.ssissdiawardAmount"
(blur) = "updateUSAmount($event, mpPatient.ssissdiawardAmount)">
</mat-form-field>
Ответы 2
Поскольку вы использовали директиву, исходный код которой я не могу найти в github, поэтому я не знаю, что произошло в этой пользовательской директиве. И из вашего кода, я думаю, вы можете просто использовать Angular CurrencyPipe, он предоставит нужный вам формат.
<mat-form-field class = "example-full-width">
<input matInput type = "text"
[value] = "testvalue | currency:'USD'" />
</mat-form-field>
Я развил вам демо и просто для справки: https://stackblitz.com/edit/angular-3gatlt?file=src/app/app.component.html
Буквально через 5 минут после того, как я разместил этот вопрос, я наткнулся на ответ. Так же просто, как разбить ngModel на части. который является привязкой свойств и привязкой событий. так что мой [(ngModel)] = "mpPatient.ssissdiawardAmount" становится
[value] = "mpPatient.ssissdiawardAmount"
(input) = "mpPatient.ssissdiawardAmount = $event.target.value"
Или ответ Кевина Чжана тоже работает.
Надеюсь, это поможет следующему парню.
Господи. почему я не догадался запилить дисплей. Спасибо!