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

在你的 Controller 中:

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