Errors appear on clicking any non-submit button (Angular Reactive Forms)

Question

I am using angular 7 and material design toolkit. I have a form which has multiple validations and two buttons; One is for opening the file picker ('upload image' button) and other is for submitting the form .Whenever I click the 'upload image' button, whose 'type' is unspecified,all the validations/errors in the form instantly appears on the corresponding fields.Is there anyway to avoid this?

This is the HTML code for 'upload image' button:

 <input 
    style="display: none" 
    type="file" (change)="uploadFile($event)" 
    #fileInput>
    <button mat-button color="primary" (click)="fileInput.click()">Select File</button>
   </div>

Thanks in advance.

Answer 1

When a button's type is not specified and it's found inside a form, it is automatically treated as type=submit button. You need to specify type=button if you do not wish it to trigger the submit mechanism.

<button mat-button type="button" color="primary" (click)="fileInput.click()">Select File</button>

Answer 2

Use the button type as button, under a form a button with no type is considered as Submit.

<button type="button" mat-button color="primary" (click)="fileInput.click()">Select File</button>