Поля угловой формы проверяются при нажатии любой кнопки внутри формы

#angular #forms #validation

Вопрос:

В моем примере у меня есть реактивная форма Angular Material с некоторыми простыми вводами и проверками. Я встроил две кнопки: одну снаружи, одну внутри form тега. Может кто-нибудь сказать мне, почему вся форма проверяется при нажатии на кнопку внутри form ?

Как я могу заблокировать проверку в этом случае?

Пример: https://stackblitz.com/edit/angular-ivy-m4kar5?file=src/app/hello.component.html

Ответ №1:

Поскольку тип атрибута кнопки по умолчанию — «отправить», вам нужно установить тип кнопки на кнопку, чтобы выполнить ваши требования.

 <button type="button">Click me and watch everything gets validated</button>
 

Ответ №2:

button Внутренняя часть формы по умолчанию имеет свойство type="submit" . Если внутри тега имеется более одной кнопки form , необходимо указать тип :

 <form>
  <button>Submit the form</button> <!-- Default is submit -->

  <button type="button">Some random action</button>

  <button type="reset">Reset a form</button>
</form>
 

Комментарии:

1. Спасибо, ваш ответ тоже правильный, но другой парень был быстрее и имел источник. Но я ценю вашу помощь!