Angular form fields get validated if any button gets clicked inside form-CodePudding

I've got an Angular Material Reactive Form in my example with some simple inputs and validations. I've built in two buttons: one outside, one inside the form tag. Can anyone tell me why the whole form gets validated if clicked on the button inside the form?

How can I block the validation in this case?

Example: https://stackblitz.com/edit/angular-ivy-m4kar5?file=src/app/hello.component.html

CodePudding user response：

Because the default button attribute type is "submit", so you need to set button type to button to achieve your requirement.

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

CodePudding user response：

The button inside the form, has by default the property type="submit". If you have more than one button inside a form tag, you must specify the type :

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

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

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