AngularJS防止提交如果輸入尚未驗證

Question

我正在試圖防止形式從如果輸入未經驗證尚未提交..

這裏是我的代碼：

HTML

<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(insertProfile)" id="form-customer" name="form" class="css-form" novalidate > 
<div class="row"> 
    <div class="col-md-7"> 
     <label>Full Name* 
     <span class="required-label" ng-show="form.$submitted || form.full_name.$touched"> 
      <span ng-show="form.full_name.$error.required">(Full Name is required.)</span> 
     </span> 
     </label> 
     <input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" /> 
    </div> 
</div> 
</form> 

<button type="submit" form="form-customer" 
     class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3"> 
Insert Customer 
</button> 

我試過使用ng-submit = "form.$valid && insertCustomer(insertProfile)" ...如果輸入爲空，但是當我輸入數值時，表單不會提交...它仍然不會提交...

Answer 1

刪除以下內容，因爲您將使用Angular Method提交表單。

method="post" enctype="multipart/form-data" 

此外，ngSubmit僅在某些情況下防止默認行爲。

這裏是更好的例子https://plnkr.co/edit/a14f9tLmKN48JCDMMpd0?p=preview

Answer 2

傳遞形式insertCustomer功能和作用是這樣的

<form method="post" enctype="multipart/form-data" ng-submit="insertCustomer(form)" id="form-customer" name="form" class="css-form" novalidate > 
<div class="row"> 
    <div class="col-md-7"> 
     <label>Full Name* 
     <span class="required-label" ng-show="form.$submitted || form.full_name.$touched"> 
      <span ng-show="form.full_name.$error.required">(Full Name is required.)</span> 
     </span> 
     </label> 
     <input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" /> 
    </div> 
</div> 
</form> 

<button type="submit" form="form-customer" 
     class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3"> 
Insert Customer 
</button> 

，並在這樣

$scope.insertCustomer = function(form){ 
    if(form.$invalid){ 
     return; 
    } 
    //form submit code.... 
} 

JS檢查檢查有效性希望它有效。