单击任何不提交按钮时出现错误（Angular反应形式）

Question

我正在使用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>

提前致谢。

Answer 1

如果未指定button的type并且在form找到它，则将其自动视为type=submit按钮。 如果您不希望它触发提交机制，则需要指定type=button 。

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

Answer 2

将按钮类型用作button ，在form下没有类型的按钮视为Submit 。

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