Save query modal works as a form

frontend/src/app/shared/components/modals/save-modal/save-query.modal.html

@@ -2,6 +2,7 @@
   class="op-modal wp-table--configuration-modal loading-indicator--location"
   data-indicator-name="modal"
   name="modalSaveForm"
+  (submit)="saveQueryAs($event)"
 >
   <op-modal-header (close)="closeMe($event)">{{text.save_as}}</op-modal-header>
 
@@ -20,7 +21,8 @@
               id="save-query-name"
               #queryNameField
               [(ngModel)]="queryName"
-              required/>
+              required
+            />
         </div>
       </div>
     </div>
@@ -38,13 +40,13 @@
 
   <div class="op-modal--footer">
     <button
+      type="button"
       class="button -with-icon icon-cancel"
       [textContent]="text.button_cancel"
       (click)="closeMe($event)"
     ></button>
     <button
       class="button -highlight -with-icon icon-checkmark"
-      (click)="saveQueryAs($event)"
       [textContent]="text.button_save"
       [disabled]="isBusy || !queryName"
     ></button>