AngularJSフォームは提出されていないときに提出し、理由はわかりません

Question

AngularJSフォームを作成しようとしています。フォームの1つの部分は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 type="button" ng-click='docUpload("userId")'>Upload File</button>

Answer 2

これはベストプラクティスであるかわかりませんが、入力ボタンにonclick="return false"を追加して問題を解決できました。