AngularJS - 防止表單提交的，如果它是無效的

我已經創建了我的問題的一個孤立的案例： http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQC AngularJS - 防止表單提交的，如果它是無效的

這裏是隔離的情況下的代碼：

<!DOCTYPE html> 
<html ng-app="App"> 

    <head></head> 

    <body ng-controller="ExampleController"> 

    <form name="form" ng-submit="submit()" novalidate> 
     <input type="number" name="number" ng-model="number" required><br> 
     <span ng-show="form.number.$error.required && form.number.$touched">Required<br></span> 
     <span ng-show="form.number.$error.number">Not a number<br></span> 
     <input type="submit"> 
    </form> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 

    <script> 

     var App = angular.module('App', []); 

     App.controller('ExampleController', function($scope) { 

     $scope.submit = function() { 
      alert('send to server: ' + $scope.number); 
     } 

     }); 

     App.run(); 

    </script> 

    </body> 

</html>

基本上，例如包含一個數字字段，並在其下方顯示錯誤消息，顯示輸入無效（空或不是數字）。

但是表單仍然會提交，儘管如果字段值無效，那麼字段值設置爲'undefined'，但我希望在發送到服務器之前檢查表單是否有效（在這個例子）。

所以我的問題是 - 在AngularJS中，有沒有一種方法來檢查表單是否在控制器內有效？或者另一種方式來阻止表單提交無效？

來源

2015-01-17 rwacarter

做得更好變化ng-submit表達

ng-submit="form.$valid && submit()"

最佳使用角度指令表達。

來源

2015-01-17 11:50:47

我喜歡這一個最好的，是的，我做 – meffect

@meffect乾淨整潔的UI本身..我幾乎用我的所有形式.. –

http://plnkr.co/edit/kqLUJpjt0n0anJxzm6en?p=preview

你需要的是

if ($scope.form.$valid) { 
    //submit to server 
}

其中form是窗體名稱

<form name="form"...

來源

2015-01-17 11:04:50

您可以NG-禁用指令

 <button type="submit" ng-disabled='number==null'>Submit</button>

嘗試

這樣，你就能夠避免增加額外的代碼

來源

2015-01-17 11:49:21 kinetix

AngularJS - 防止表單提交的，如果它是無效的

回答

相關問題