Когда есть поле ввода с проверкой в ​​Angular, требуется два щелчка, чтобы передать управление переключателю

Question

У меня есть поле ввода и поле радио. Когда я нажимаю на поле ввода, а затем нажимаю на поле радио, я полагаю, что элемент управления должен немедленно перейти на окно радио. Вместо этого в первый раз отображается сообщение об ошибке, а во второй раз - управление передается в радиоблок.

Вы можете найти планшер этой проблемы здесь: Нет передачи управления на радиоблок, кроме как после второго щелчка

Answer 1

Да, это потому, что вы показываете ошибку в виде блока, это переключает переключатель.

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

Это может быть доля секунды, но этого достаточно для того, чтобы обмануть вашего пользователя.

Я бы порекомендовал либо отображать вашу ошибку другим способом / найти другой макет для вашей формы, либо просто проверить форму при отправке.

Чтобы проверить форму при отправке, используйте второй параметр вызова FormBuilder.group:

this.myForm = fb.group({...}, { updateOn: 'submit' });

Вот пример рабочей формы, поскольку ошибка стирается, а не удаляется (hidden против style.opacity): https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1