В своей предыдущей статье я объяснил, как использовать реактивные формы Angular и, в частности, как обрабатывать ошибки. Недавно я заметил, что если вы хотите повторно использовать этот пример для формы обновления с данными, поступающими с сервера (что довольно часто), это не так просто.
Добавить в форму асинхронные данные по умолчанию
Давайте добавим адрес электронной почты и пароль в LoginComponent и будем использовать их в качестве значений по умолчанию для формы:
Это значение будет установлено в следующем шаблоне AppComponent:
Для их инициализации мы используем setTimeout для имитации обращения к серверу:
Это не работает ... Поля никогда не заполняются данными с сервера. Это раздражительно…
Решение 1: * ngIf
Моя первая идея заключалась в том, чтобы добавить * ngIf в тег компонента, чтобы форма создавалась только после успешного получения данных электронной почты и пароля.
Это красивое и простое решение, но оно работает только один раз. Если по какой-то причине данные изменяются (например, если они получены из веб-сокета), то будет обновлено только первое (начальное) изменение.
Вы можете проверить это, добавив второй setTimeout в AppComponent:
Решение 2: OnChanges
Проблема в том, что мы инициализируем нашу форму значениями по умолчанию в ngOnInit () и никогда не реплицируем изменение. Итак, чтобы исправить это, нашему LoginComponent просто необходимо реализовать OnChanges, чтобы мы могли установить новые значения для формы в ngOnChanges ():
Какое решение использовать?
Если ваша форма получает данные с помощью одного вызова, то более эффективно просто показать форму, когда данные будут готовы. Решение 2 может не подходить для случая формы. Если данные изменяются во время обновления, пользователя может сбить с толку.
Вы будете сталкиваться с этой проблемой каждый раз, когда ваш родительский компонент извлекает данные асинхронно, чтобы передать их своему дочернему элементу, если последнему необходимо обработать их перед отображением - даже если обработка состоит из чего-то столь же простого, как добавление «++» к строке ( см. пример ниже).
Спасибо, что прочитали эту статью. Вы можете найти полные примеры на Github: решение 1 и решение 2.