AngularJS 1.5 - 在 iOS 上提交的表单带有空的必填字段

Question

我实际上正在使用 AngularJS (1.5.11) 开发一个 Cordova 应用程序。我在 iOS 上遇到了一个非常奇怪的错误，而我在 Android 上没有（相同的代码）。

我从表单中删除了所有不需要的信息以重现错误（类、指令、额外的 div...）并且错误仍然存​​在 :(

这是表格：

<form method="post" ng-submit="$ctrl.login()">
    <input type="email" name="username" value="" required ng-model="$ctrl.username">
    <input type="password" name="password" value="" required ng-model="$ctrl.password">
    <button type="submit">Submit</button>
</form>

我的表单正在提交，即使它是无效的。这是一个基本的登录表单，包含两个字段（登录名、密码）和一个按钮。

仅供参考，我的应用程序中的每个表单都受到此错误的影响。

我错过了什么吗？ 谢谢你的帮助:)

Answer 1

你有 3 个选项

1.- 如果表单无效，则禁用提交按钮：

<form name="needNameForm" method="post" ng-submit="$ctrl.login()">
...
<button type="submit" ng-disabled="needNameForm.$invalid">Submit</button>
</form>

2.- 如果表单无效，则忽略提交：

<form name="needNameForm" method="post" 
ng-submit="needNameForm.$valid && $ctrl.login()">
...
</form>

3.- 检查提交方法的有效性：

<form name="needNameForm" method="post" 
ng-submit="$ctrl.login(needNameForm)">
...
</form>
<!-- for testing purposes you can use this line below -->
<pre>{{needNameForm | json}}</pre>

在您的控制器中：

angular.controller('name', function(){
var vm = this;
vm.login = function(formController){
  if(formController.$valid){
   doStuff();
  }
 }
}

使用第三个选项，如果您想验证表单中的每个输入，您将拥有更多控制权，formController 对象将包含每个输入的所有信息，并且您还需要添加一个名称输入，以便您可以获得有关它们的完整信息，以下是有关它的所有信息：https://docs.angularjs.org/api/ng/type/form.FormController