Question

通常要在Angular中验证表单，我会在ng-submit指令上使用类似的东西：

<form name="formName" ng-submit="formName.$valid && submitForm()"></form>

当表单具有我在构建表单时设置的名称时，这非常有用。但是，在我目前的情况下，我正在尝试基于对象列表创建多个表单。在这种情况下，每个表单都有一个即时确定的名称。

当用户提交其中一个表单时，如何在运行该表单的submitForm()函数之前对其进行验证？

这是简化问题的一个方面：http://jsfiddle.net/flyingL123/ub6wLewc/1/

我的问题是，如何访问表单的名称以进行验证？以下是小提琴的代码：

＆＃13;

var app = angular.module('app', []);

app.controller("AppController", ['$scope', function($scope) {
  $scope.forms = [{
    id: 1,
    value: "val1"
  }, {
    id: 2,
    value: "val2"
  }, {
    id: 3,
    value: "val3"
  }];

  $scope.submitForm = function() {
    alert('submitted');
  }
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div id="app" ng-app="app" ng-controller="AppController">
  <div class="formWrapper" ng-repeat="form in forms">
    <form name="{{ 'form' + form.id }}" ng-submit="submitForm()" novalidate>
      <input ng-model="form.value" required />
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

＆＃13;

Answer 1

您始终可以使用this访问模板中的范围。

{{this.foo === foo}} <!-- This will always show "true" -->

因此，您只需使用this[myDynamicFormName]即可访问表单：

<form name="{{'form' + form.id}}" ng-submit="this['form' + form.id].$valid && submitForm()"></form>

具有动态名称的角度验证表单

1 个答案: