AngularJS表单在不应该提交时提交，我不确定为什么

Question

我正在尝试创建一个angularJS形式。表格的一部分是从文件中获取base64并将其存储到我的$scope.user。但是，单击文件上传输入并选择我的文件正在提交我的表单，这不应发生。

这是我的形式：

<form ng-submit="processForm()" name="merchApp"  style="position:relative">
    <div class="form-section" ui-view>
        <div class="row">
        <div class="col-sm-12 text-center">

        <button href="#" ng-click='docUpload("userId")'>Upload File</button>&nbsp;{{user.uploadIdName}}
        <br/>* Accepted file types: .jpg, .png, .gif, .pdf, .doc, .docx
        <br/>
        (Max file size: 2MB)
        <br/>
        <input ng-model="user.uploadId" type="hidden" value="{{user.uploadId}}" required>

    <br/><br/>
    <button type="submit" class="next" ng-disabled="merchApp.$invalid">SUBMIT APPLICATION</button>
</div>
</div>
</div>   
</form>

这是我的app.js

.controller('formController', ['$scope', '$http', '$parse', function($scope, $http, $parse) {
// we will store all of our form data in this object
$scope.user = {};
$scope.docUpload = function() { //default function, to be override if browser supports input type='file'
  $scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}

var fileUploadScope;
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
  return;
}
var fileUploadScope;
var fileUploadName;
$scope.docUpload = function(x) { //activate function to begin input file on click
    switch(x){
        case "checkBankLetter":
            fileUploadScope = $parse("uploadCheckBankLetter");
            fileUploadName = $parse("uploadCheckBankLetterFileName");
            break;
        case "userId":
            fileUploadScope = $parse("uploadId");
            fileUploadName = $parse("uploadIdName");
            break;
        default:
            alert ("error");
    }

    fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
     var f = fileSelect.files[0];
     var fsize = f.size;
     var fileTypes = ['jpg', 'jpeg', 'png', 'doc', 'docx', 'pdf', 'gif'];
    if (fsize > 2097152){//file size limit is 2MB
           alert ("File size too large. Please select a file 2MB or smaller.");
     }
     else {// file size is acceptable
         if(f){
             var extension = f.name.split('.').pop().toLowerCase(),  //file extension from input file
                 isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types
             if (isSuccess) { //yes
                var r = new FileReader();
                r.fileName = f.name;
                if (typeof FileReader !== "undefined"){
                        r.onloadend = function(e) { //callback after files finish loading
                            // allow for different scope names for file upload functions
                            fileUploadScope.assign($scope.user, e.target.result);
                            fileUploadName.assign($scope.user, r.fileName);
                            $scope.$apply();

                        //here you can send data over your server as desired
                        }
                        r.readAsDataURL(f); //once defined all callbacks, begin reading the file

                }

             }
             else {
                 alert("Please select an acceptable file type");
             }
         }
     } 


};
// function to process the form
$scope.processForm = function() {
    $http({
      method  : 'POST',
      url     : 'docusign.php',
      data    : $scope.user  // pass in data as strings
     })
      .success(function(data) {
            console.log(data);
            location.replace(data);
        });
};
}])

processForm()在我单击<button href="#" ng-click='docUpload("userId")'>Upload File</button>并选择一个文件后发射，我无法弄清楚为什么会发生这种情况。

Answer 1

理想情况下，更好的做法是为按钮指定type属性。

没有type属性的按钮作为提交按钮，这是您单击按钮时提交表格的原因。

因此，将type属性添加到按钮。|type="button"删除href属性，因为它不需要按钮。

更改此行
<button href="#" ng-click='docUpload("userId")'>Upload File</button>

<button type="button" ng-click='docUpload("userId")'>Upload File</button>

Answer 2

我不确定这是否是最佳实践，但是我能够通过将onclick="return false"添加到输入按钮来解决问题。