У меня есть простая форма входа в систему с полем имени пользователя (обязательно), кнопкой «Войти», кнопкой «Отмена» и ссылкой «Забыли пароль». Поле имени пользователя ориентировано на загрузку страницы.
Я использую ngMessages для отображения ошибок проверки, и в этом простом примере единственным правилом проверки формы является требование имени пользователя. Я не хочу показывать ошибку проверки при загрузке страницы, только после того, как пользователь покинет поле имени пользователя. Для этого я установил сообщение о необходимости имени пользователя, которое будет отображаться только после того, как элемент имени пользователя будет зарегистрирован как касающийся.
Моя проблема возникает, когда пользователь нажимает кнопку «Отмена» или ссылку «Забыли пароль», сообщение проверки для требуемого имени пользователя отображается, как и ожидалось, однако событие щелчка для кнопки или ссылки никогда не запускается. Это, конечно, правильное поведение для кнопки отправки, но не для любого другого элемента (ссылки/кнопки) на странице.
Не похоже, что ngMessages должен определять, следует ли отменять события кликов. Хотя в данном случае это правильное поведение для кнопки отправки, я предпочитаю управлять этим самостоятельно. Это ошибка или я неправильно реализовал ngMessages или что-то еще?
Отредактировано, чтобы полностью прояснить заданный вопрос. Почему отображение сообщения о проверке приводит к отмене несвязанного события клика и как я могу предотвратить это?
Вот плункер: https://plnkr.co/edit/bLWODaWSXowZ4AcgTze9?p=preview
Отредактировано для добавления: В Plunkr после загрузки страницы, если пользователь нажимает ссылку «Забыли пароль», должно появиться сообщение об ошибке проверки «Требуется имя пользователя» И должно сработать событие клика «Забыли пароль», отображающее сообщение о страница с надписью «Перейти к сбросу пароля». Это событие щелчка не произойдет, если вы не нажмете ссылку «Забыли пароль» во второй раз.
Вот код:
<form name="buttonFail" novalidate autocomplete="off">
<label for="username">Username</label>
<div>
<input ng-model="ngUsername" id="username" name="username" type="text" required class="ngMessageSample" autofocus />
<div ng-messages="buttonFail.username.$error" class="ngMessagesClass" ng-show="buttonFail.username.$touched">
<div ng-message="required" class="ngMessageClass">* This field is required</div>
</div>
</div>
<button type="submit" ng-click="//do nothing">Log In</button>
<button type="button" ng-click="ngModel.saySomething='Log in cancelled';">Cancel</button>
<br />
<a href="#" ng-click="ngModel.saySomething='Go to password reset';">Forgot password?</a>
<div>{{ngModel.saySomething}}</div>
</form>
