單擊任何不提交按鈕時出現錯誤（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>