在ajax請求之前使用angularjs驗證表單

Question

我有一個像這樣的簡單表格。 我正在使用 angularjs 通過 ajax 提交此表單。 我想在發送 ajax 請求之前驗證此表單並需要向用戶顯示錯誤。 我是角度的新手。 請幫我

這是我的代碼。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<div ng-app="Myapp">
    <div ng-controller="orderFormController">

        Item :   <input type="text" name="item"  ng-model='item' required> <p></p>
     Rate:   <input type="text" name="rate"  ng-model='rate' required> <p></p>

        <button type="button"  ng-click='saveorder()' >SAVE ORDER</button>
    </div>    
    <script>
        var Myapp = angular.module('Myapp', ["ngRoute"]);
        Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {


            $scope.saveorder = function () {

                 // Validate form here and set the error in form

                 $http.post("order/save/", data).success(function (res, status, headers, config) {
                     $scope.message = res;

                }).error(function (data, status) { 
                    $scope.message = res;
                });
            }

        }]);
    </script>             

Answer 1

非常簡單的實現可以通過幾個步驟完成：

1. 使用帶有name屬性的<form>標簽。 在ng-submit屬性中使用saveorder 。
2. 創建錯誤容器，並使它們的可見性依賴於錯誤： <span class="error" ng-show="form.item.$error.required ">

最終結果應如下所示：

<div ng-controller="orderFormController">    
    <form name="form" ng-submit="saveorder()">
        Item :   <input type="text" name="item"  ng-model='item' required> <p></p>
        <span class="error" ng-show="form.item.$error.required"> Item field is required!</span>
        Rate:   <input type="text" name="rate"  ng-model='rate' required> <p></p>    
        <span class="error" ng-show="form.rate.$error.required"> Rate field is required!</span>
        <button type="button">SAVE ORDER</button>
    </form>    
</div>  

您可以閱讀有關表單驗證的Angular 原生文檔。 那里提供了更多詳細信息。

Answer 2

閱讀這篇文章.. https://scotch.io/tutorials/angularjs-form-validation

它很好地解釋了它，如果仍然存在混淆，請在努力之后詢問那些問題。

Answer 3

您應該為此或自定義驗證使用角度表單驗證

 var Myapp = angular.module('Myapp', ["ngRoute"]); Myapp.controller('orderFormController', ['$scope', '$http', function($scope, $http) { $scope.formdata = {}; $scope.saveorder = function(formdata) { $scope.error = ''; // Validate form here and set the error in form if (angular.isUndefined(formdata.item) == true || angular.isUndefined(formdata.rate) == true) { $scope.error = "Both Item and Rate are required." return false; } else { $scope.error = ''; } $http.post("order/save/", formdata).success(function(res, status, headers, config) { $scope.message = res; }).error(function(status, res) { $scope.message = res; }); } }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script> <div ng-app="Myapp"> <div ng-controller="orderFormController"> <span style="color:red">{{error}}</span><br> Item : <input type="text" name="item" ng-model='formdata.item' required> <p></p> Rate: <input type="text" name="rate" ng-model='formdata.rate' required> <p></p> <button type="button" ng-click='saveorder(formdata)' >SAVE ORDER</button> </div>