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

Question

我想达到什么目标？

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

这是最简单的演示，展示了我能在多大程度上发挥作用：http://jsbin.com/gokewosoti/13/edit（用解决方案更新）

我创建了名为doForm的提交处理程序，用于处理提交按钮上的click事件。 在里面，我可以访问变量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"

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