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%2Fapp%2Fhello.component.html
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>
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>
