Html 单击任何非提交按钮时出现错误（角度反应表单）

我正在使用angular 7和材料设计工具包。我有一个表单，它有多个验证和两个按钮；一个用于打开文件选择器（“上载图像”按钮），另一个用于提交表单。每当我单击“上载图像”按钮（其“类型”未指定）时，表单中的所有验证/错误都会立即显示在相应字段中。是否有任何方法可以避免这种情况

这是“上载图像”按钮的HTML代码：

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

选择文件

---

提前感谢。

使用按钮类型作为

按钮

，在

表单下

没有类型的按钮被视为

提交

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

选择文件

使用按钮类型作为

按钮

，在

表单下

没有类型的按钮被视为

提交

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

选择文件

如果未指定

按钮的
类型
，并且在
表单
中找到该按钮，则会自动将其视为
类型=提交
按钮。如果不希望触发提交机制，则需要指定
type=button

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

选择文件
如果未指定
按钮的
类型
，并且在
表单
中找到该按钮，则会自动将其视为
类型=提交
按钮。如果不希望触发提交机制，则需要指定
type=button

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

选择文件