Dependent controls — каскадные поля формы

Паттерн

Каскадные поля формы: выбрали страну — обновился список городов; выбрали категорию — обновился список продуктов. Дочерние поля зависят от родительских.

Какую проблему решаем

Форма состоит из связанных полей, и при каждом изменении родителя нужно перезагрузить options для детей. Если делать это императивно — подписками и ручными setValue — рано или поздно ответ для старой страны (US) придёт после того, как пользователь уже выбрал новую (DE), и в выпадашке появятся NY и SF вместо Berlin и Munich.

Операторы и зачем они нужны

• combineLatest — собирает актуальную пару (страна, категория) в один поток.
• startWith — даёт начальные значения, чтобы VM появился сразу, а не после первого изменения каждого поля.
• switchMap — при новой комбинации отменяет загрузку options для старой.
• map — превращает справочник в компактный view model для шаблона.

Подводные камни

• mergeMap вместо switchMap — старый медленный ответ перепишет новые options.
• Без startWith шаблон будет пустой, пока пользователь не тронет каждое поле — combineLatest молчит, пока все источники не эмитнут хотя бы раз.
• Императивный setValue внутри pipeline без защиты создаст бесконечный цикл valueChanges.