Как использовать Pipe в реактивных формах Angular 14?
Мы используем Angular Reactive Forms и каналы для форматирования данных, которые отлично работали с Angular 9, но после обновления до 14. Можем ли мы больше использовать каналы в Angular Reactive Forms?
Ожидается, что если пользователь вводит значение, например 123,45678, нам нужно округлить и добавить суффикс с символом «%», например 123,457%
Когда пользователь снова пытается редактировать (в фокусе), нужно показать значение базы данных, например 123.45678. при размытии или табуляции нужно снова преобразовать, например, 123,457%
Этот сценарий отлично работал с Angular 9, но после обновления до 14.
Образец я сделала в stackblitz.
Привет, Ашот! Большое спасибо за вашу помощь. Все работает, как и ожидалось, вы действительно спасли мне жизнь. Я думаю, мы на связи :)
Привет GRD, Спасибо за вашу помощь. Если вы заметили, что значение formControl изменяется с форматированным значением, этого не должно происходить. Я очень ценю ваши усилия и помощь. Спасибо.
Здравствуйте @Cegone, нет проблем, да, дайте мне знать, если возникнут вопросы :)
@Cegone Привет, спасибо, что сообщили мне о решении. Здесь я даю вам решение с использованием директивы. Таким образом, нет никакой необходимости использовать трубу вообще. Ваш html остается простым. Вот демо и обсуждайте дальше, и все мои контактные данные находятся в этом демо stackblitz.com/edit/angular-aw9cit-gwv7rg?file=package.json
Ответы 1
Вы можете сделать поддельный компонент только для чтения не связанным с formControl Итак, удалите параметр formControlName из второго ввода (только для чтения).
И второй совет: вы можете удалить значение настройки из первого ввода.
[value] = "loanFormGroup.get('interest')?.value"
Потому что это не влияет на реактивное управление
Демо - https://stackblitz.com/edit/angular-aw9cit-fkxxdu?file=src/app/app.component.html
Привет, Никита! Большое спасибо за вашу помощь, ваши решения и решения Ашота работают, как и ожидалось. Очень ценю вашу помощь и усилия. Еще раз спасибо.
Единственная проблема в вашем примере - это [formControlName], применяемый к входу только для чтения, если вы удалите его, все будет работать так, как ожидалось. Вот исправленный пример stackblitz.com/edit/…