单击任何非提交按钮时出现错误（Angular Reactive Forms）

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>