Question

我使用ng-repeat创建多个表单，我希望将每个表单验证作为vm.validate函数的第二个参数传递。触发ng-change时效果很好，但按下单击按钮时则不行。

delete

按下点击按钮后出现以下错误：

<div ng-repeat="user in data" ng-form="formName_{{$index}}">
<input type ="user.name" ng-change="vm.validate(user, formName_{{$index}}.$valid)"/>
<button ng-click"vm.validate(user, formName_{{$index}}.$valid)"/> click</button>
</div>

Answer 1

我同意巴萨夫的回答，支持我写过一个小小的答案的答案。它使用ng-attr-name将动态变量fromName绑定到表单。

http://jsfiddle.net/bishtneha/20ygxyLr/

<div ng-app="app" ng-controller="formExampleCtrl as vm">
  <div class="row">
    <div ng-repeat="user in vm.data" ng-init="formName = 'form' + $index">
      <form class="form-horizontal" ng-attr-name='formName' novalidate ng-submit="!formName.$invalid && vm.saveForm()">
        <input type="user.name" name="name" ng-change="vm.validate(user, 
               formName.name.$valid)" />
        <button type="submit" class="btn btn-primary">Click</button>
      </form>enter code here
    </div>
  </div>
</div>

Answer 2

用纯表达式替换插值：

<!-- REPLACE this
<button ng-click"vm.validate(user, formName_{{$index}}.$valid)"/> 
     click
</button>
-->

<!-- INSTEAD -->
<button ng-click"vm.validate(user, this['formName_' + $index].$valid)"> 
     click
</button>

为什么混合插值和表达式是不好的做法：


它增加了标记的复杂性

无法保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。

它会影响性能，因为插值会为范围添加另一个观察者。

由于不推荐使用，我们不对此进行测试，对AngularJS核心的更改可能会破坏您的代码。


— AngularJS Developer Guide - Interpolation

Answer 3

我们可以使用ng-attr-name，如 -

<div ng-repeat="user in data" ng-init="formName='FORM'+$index">
    <form ng-attr-name="formName" novalidate ng-submit="formName.$valid && vm.onSubmitClickHandler()">
          <button type="submit">Submit</button>
     </form>
</div>

将表单验证作为ng-click方法angularjs的参数传递

3 个答案:

为什么混合插值和表达式是不好的做法：