如何在Angular中提交表單

Question

我有一個用Angular控制器驗證的html表單。 如果驗證失敗，則將某些類應用於html。 如果通過了，我想讓表單自己提交。 盡管這看起來非常簡單，但是我還沒有找到一種簡單的方法來做到這一點。 我發現的一種方法使用$scope.$broadcast函數告訴表單提交，但是，我將Controller as Ctrl語法，所以我寧願不使用$scope 。 無論如何，有需要從控制者那里提交表格嗎？

我的簡化HTML

<form ng-controller="LoginCtrl as login" ng-submit="login.validate()" method="post">
    <input ng-model="login.username" />
    <input ng-model="login.password" />
</form>

JS

var app = angular.module("app", []);

app.controller("LoginCtrl", ["$http", function($http) {
    this.username = "";
    this.password = "";
    this.validate = function() {
        //validate
        if (valid) {
            // somehow form.submit()
        }
    };
}]);

我對Angular有點陌生，所以如果這是一個明顯的疑問，請原諒我；）

編輯 ：我需要澄清的是，我希望避免使用AJAX（即$http.post ）提交表單。 基本上我想要的是等效於調用form.submit()的控制器。

用例 ：讓我確切地解釋我要做什么。

User arrives at login page
User enters credentials
User hits Submit
    Controller asks server (using api path) if the credentials are valid
    if valid then
        Tell the form to submit to regular login path // how?
    else
        Immediately tell the user they submitted invalid credentials

這樣，如果用戶輸入了錯誤的憑據，用戶將立即獲得反饋。 除了實際的表單提交，我已經實現了所有這些功能。

Answer 1

最簡單的方法是將所有表單元素數據包裝到一個對象中。 如果沒有要填充的數據，則不必創建此對象， ng-model會為您創建它。

<form ng-controller="LoginCtrl as login" ng-submit="login.validate()" method="post">
    <input ng-model="login.MyFormData.username" />
    <input ng-model="login.MyFormData.password" />
</form>

這將導致控制器范圍內的對象看起來像：

$scope.MyFormData={
   username :'foo',
   password:'bar'
}

准備提交時：

$http.post('path/to/server', $scope.myFormData).success(response){
   /* do something with response */
})

Answer 2

我認為您希望在表單提交流程中進行驗證。 嘗試這樣的事情：

的HTML

<form ng-controller="LoginCtrl as login" ng-submit="login.submit()" method="post">
    <input ng-model="auth.username" />
    <input ng-model="auth.password" />
    <div class="error" ng-hide="valid">Something is invalid...</div>
</form>

JS

var app = angular.module("app", []);

app.controller("LoginCtrl", ["$http", "$scope", function($http, $scope) {
    $scope.valid = true;
    $scope.auth.username = "";
    $scope.auth.password = "";

    var valid = function() {
        // validate

        return valid; // true or false
    };

    this.submit = function() {
        if (valid()) {
            $http.post('/your/auth/url', { auth: auth }).success(function(response) {
                // whatever you're doing to store the auth response.
            });
        } else {
            // use this to conditionally show error messages with ng-show
            $scope.valid = false;
        }
    };
}]);

我不確定我是否理解您對使用controller-as語法的評論。 那不應該改變$scope使用方式。

Answer 3

我有一個最起碼的代碼的例子在這里 。 注意，它是自我驗證的，您甚至不需要從COntroller提交任何內容！ 您可以將動作和方法字段包括為表單屬性，如果有效，angular將提交表單

的HTML

<form name="LoginCtrl as loginForm" method="Post" action="not-a-real-script.php">
  <input type="text" name="name" ng-model="loginData.name" placeholder="username" required="" />
  <input type="password" name="password" ng-model="loginData.password" placeholder="Password" required />
  <input type="submit" ng-disabled="loginForm.$invalid" value="Login" />
</form>

JS

angular.module('app', [])
.controller('LoginCtrl', function($scope) {
  $scope.loginData = {};
});