Ошибки появляются при нажатии любой кнопки без отправки (угловые реактивные формы)

Question

Я использую угловой 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 's 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>