Angular реактивное преобразование данных формы

Question

У меня есть данные, поступающие с сервера, которые отформатированы в метрах, но в интерфейсе мне нужно отобразить и отредактировать в дюймах, а затем снова отправить их на сервер в метрах. Существует некоторая техника для динамического управления преобразованием, скажем, с использованием функции преобразователя, связанной с formControl, или чем-то еще? Я использую angular компоненты материала.

Заранее спасибо

Answer 1

Один из лучших способов - использовать директиву для преобразования в дюймы, чтобы вам не приходилось беспокоиться о данных на сервере.

примерно так:

<form [formGroup]="newForm" (ngSubmit)="onSubmit()">
 <input formatData formControlName="data"/>
</form>

onSubmit() {
// ...conversion back to meters
}

Я использую реактивные формы, так как это более динамично c и то, что я часто использую при динамическом построении форм, но вы также можете делать то же самое с шаблонными формами.

Answer 2

Вы можете использовать Angular Трубы , чтобы преобразовать данные и затем отобразить их в вашем интерфейсе (просмотр).

Трубы - это angular декорированный класс, который реализует функцию преобразования, которая принимает данные в качестве входных данных, преобразует их в желаемый вывод и показывает их пользователям (так как они могут быть добавлены к вашему HTML). Вы можете прочитать больше о них здесь и написать Custom Pipe для ваших целей.