angularjs（离子）中的表单验证对我不起作用

Question

我想达到什么目标？

我有一个表单，其中包含具有某些类型且是必需的输入。每当用户单击“提交”时，我想检查表单是否通过验证。

这是一个最低限度的演示，展示了我在多大程度上完成了所有工作：http://jsbin.com/gokewosoti/13/edit（已更新解决方案）

我创建了名为doForm 的提交处理程序，它处理提交按钮上的点击事件。 在里面我可以访问变量theForm（表单的名称）。

根据某些消息来源 (http://blog.brunoscopelliti.com/form-validation-the-angularjs-way)，我应该能够执行 theForm.$valid 并获得一个布尔值来显示表单是否有效。事实证明这是行不通的。

当我运行一些繁琐的代码时它确实有效： formy = angular.element(theForm).scope().theForm 然后突然formy.$valid 起作用了。

我做错了什么？

更新（已解决）

感谢标记答案的解决方案：http://jsbin.com/gokewosoti/14/edit

Answer 1

您需要将表单传递给您正在调用的函数。

所以你的提交按钮代码需要改成这个

<input type='submit' value='submit' ng-click='doForm(theForm)' />

你的 doForm 函数需要改成这个

$scope.doForm = (theForm) ->

您需要删除此部分以清除控制台中的错误

  formy = angular.element(theForm).scope().theForm

  if formy.$valid == true
    console.log "Wrong is valid"
  else
    console.log "Wrong is not valid"

所以你的完整提交函数如下所示

$scope.doForm = (theForm) ->
  # Here `theForm` is an html element, not a 
  # angular-ised object

  # So this doesn't work:
  if theForm.$valid == true
    console.log "I am valid"
  else
    console.log "Form isn't valid"

请注意，您需要在最后一个输入框中输入有效的电子邮件地址格式才能正确验证。