【问题标题】:Reference angular ng-form from controller来自控制器的参考角度 ng-form
【发布时间】:2015-03-05 04:18:03
【问题描述】:

如何从我的控制器中引用 ng-form 对象?

我有

<ng-form name="myForm">
</ng-form>

HTML 页面上的这段代码运行良好

 {{myForm.$valid}}

根据具体情况返回真或假。

但我想要的是从控制器的功能中检查表单的状态,例如在发布数据或检索数据之前。

我试过了

$scope.myForm.$valid

但这并不存在。在$scope 本身中也没有对myForm 对象的任何引用。

ng-form 在 ng-repeat 中使用,所有这些都在普通 HTML 表单对象中,这就是使用它的原因。

正如我所说,myForm.$invalid 用于控制 HTML 页面上该表单内的显示/启用控件就好了。

有什么想法吗?

【问题讨论】:

  • 你想在什么功能上使用它?是ngClick,还是ngSubmit函数?
  • 这个问题的答案可能对stackoverflow.com/questions/15022180/…有帮助。似乎您可以在表单的元素而不是整个表单上使用 $valid 和 $invalid。
  • @dfsq - 它不用于任何这些函数,而是用于另一个 $scope 函数,例如 $scope.getAdditionalData
  • @camden_kid - 是的,我已经可以使用前面提到的 ng-disabled="myForm.$invalid" 来控制提交按钮。

标签: angularjs


【解决方案1】:

在提交时检查表单是否有效的一种方法是将myForm.$valid 传递给提交函数:

<ng-form name="myForm" ng-submit="test(myForm.$valid, obj)">
  <input type="text" name="test" ng-model="obj.user" required>
  <input type="submit" ng-click="test(myForm.$valid, obj)" ng-disabled="!myForm.$valid">
</ng-form>

以及测试功能:

$scope.test = function($valid, obj) {
  if (!$valid) return;
  console.log(obj);
}

plnkr

【讨论】:

  • 看起来它会做我想要的,但只在提交时?状态(特别是 myForm.$error 对象如果不按所示发回就不能访问吗?
  • 其实看这个plnkr,函数可以从控制器访问myForm对象:plnkr.co/edit/KEa5Nq3aynAETKS86YMy?p=preview
  • 正确,这确实适用于单个 ng-form 但不适用于 ng-repeat。以你的小提琴的叉子为例。 plnkr.co/edit/d7WEoX0h37MziGfnJtMS?p=preview 我希望能够像您展示的那样访问它,但可能是 $scope.myForm[2] 形式?
  • @DeclanMcD 在这种情况下,当 ng-repeat 为每个表单创建一个新范围时,您最好将表单传递给函数并打印它。 plnkr.co/edit/ONhN26xik2M2HcBZQa6z?p=preview
猜你喜欢
  • 2014-03-07
  • 2017-05-26
  • 2017-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-03
  • 1970-01-01
  • 2020-02-21
相关资源
最近更新 更多