Javascript 如何以英文提交表格

我有一个html表单，我正在用Angular控制器验证它。如果验证失败，我会对html应用某些类。如果通过，我想让表单自行提交。虽然这看起来很简单，但我还没有找到一个简单的方法来做到这一点。我发现的一种方法使用

$scope.$broadcast

函数通知表单提交，但是，我使用

控制器作为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>

我有点生疏，所以如果这是一个明显的问题，请原谅我；）

编辑： 我需要澄清，我希望避免使用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

这样，如果用户输入了不正确的凭据，就会立即得到反馈。

---

除了实际表单提交之外，我已经实现了所有这些。

最简单的方法是将所有表单元素数据包装到一个对象中。如果没有要预填充的数据，则不必创建此对象，

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>

准备提交时：

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

---

我认为您希望将验证作为表单提交流程的一部分。试着这样做：

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>

<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>

---

我不确定我是否理解您关于使用控制器作为语法的评论。这不应该改变您使用

$scope

的方式，我有一个简单的最小代码示例。注意，它是自验证的，您甚至不需要从控制器提交任何内容！您可以将action和method字段包含为表单属性，如果表单有效，angular将提交表单

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>

<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>

---

请看一看如何在AngularJS中验证表单非常有用！我一定会考虑通过一个指令来验证。然而，它并没有回答我最初提出的用Angular以编程方式提交表单的问题。为此，您必须使用$http从登录控制器Hanks向服务器发布数据！然而，这并不能完全回答我的问题。我想知道如何从我的控制器提交您的表单部分。您需要使用

$scope

。我已经相应地更新了我的答案。注意在作用域上使用了

auth

对象。将表单数据放入对象是一个好主意。我考虑采用这种方法，但我更希望能够让表单自行提交，而不是使用AJAX提交表单。我应该在我的问题中提到这一点。这是一个好主意，但我正在尝试检查后端数据库中是否存在该用户，因此这与您的代码所做的验证不完全相同。不太确定您的意思，会提交一个登录表单，以便后端可以验证该用户。我相信您有两个选项：提交表单，表单上的“action=script url”属性与我一样，或者您在控制器中使用$http服务，正如其他人所建议的，请参阅更新的问题。因此，对于角度控制器来说，没有办法让HTML表单自行提交？您有两个选项。1） 做我在上面的Plunker示例中所做的。当用户输入凭据并点击提交时，表单将自动发送到服务器。然后，服务器可以返回重定向消息，在登录后将用户发送到页面，如果凭据无效，则返回错误。另一个选项是使用$http。当用户单击submit时，您向服务器发送一个$http请求，服务器响应一条有效/无效消息。然后，在angular控制器内，如果登录成功，您可以使用$location service重定向到登录页面。当您在控制器内时，没有必要告诉表单自行提交，如果您有ng submit=“loginHandler（）”，loginHandler应负责所有登录，该表单没有做任何其他关于提交的事情

<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>

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