В своей предыдущей статье я объяснил, как использовать реактивные формы Angular и, в частности, как обрабатывать ошибки. Недавно я заметил, что если вы хотите повторно использовать этот пример для формы обновления с данными, поступающими с сервера (что довольно часто), это не так просто.

Добавить в форму асинхронные данные по умолчанию

Давайте добавим адрес электронной почты и пароль в LoginComponent и будем использовать их в качестве значений по умолчанию для формы:

Это значение будет установлено в следующем шаблоне AppComponent:

Для их инициализации мы используем setTimeout для имитации обращения к серверу:

Это не работает ... Поля никогда не заполняются данными с сервера. Это раздражительно…

Решение 1: * ngIf

Моя первая идея заключалась в том, чтобы добавить * ngIf в тег компонента, чтобы форма создавалась только после успешного получения данных электронной почты и пароля.

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

Вы можете проверить это, добавив второй setTimeout в AppComponent:

Решение 2: OnChanges

Проблема в том, что мы инициализируем нашу форму значениями по умолчанию в ngOnInit () и никогда не реплицируем изменение. Итак, чтобы исправить это, нашему LoginComponent просто необходимо реализовать OnChanges, чтобы мы могли установить новые значения для формы в ngOnChanges ():

Какое решение использовать?

Если ваша форма получает данные с помощью одного вызова, то более эффективно просто показать форму, когда данные будут готовы. Решение 2 может не подходить для случая формы. Если данные изменяются во время обновления, пользователя может сбить с толку.

Вы будете сталкиваться с этой проблемой каждый раз, когда ваш родительский компонент извлекает данные асинхронно, чтобы передать их своему дочернему элементу, если последнему необходимо обработать их перед отображением - даже если обработка состоит из чего-то столь же простого, как добавление «++» к строке ( см. пример ниже).

Спасибо, что прочитали эту статью. Вы можете найти полные примеры на Github: решение 1 и решение 2.