Question

我有一个特殊的设置，我需要动态显示表单是否在DOM的另一部分的表单范围之外有效。具体来说，我的标记是这样的：

<section class="overview">
  <div ng-repeat="file in files">{{ file.name }}</div>
</section>

<section class="forms">
  <form ng-repeat="file in files" name="'fileForm' + $index">
    <!-- form stuff ->
  </form>
</section>

<button>Submit All</button>

对于fileForm部分中的每个.overview，如果相应的表单有效，我想应用ng-class。像这样：

<div ng-repeat="file in files" ng-class="{ valid: 'fileForm' + $index.$valid }>{{ file.name }}</div>

有没有办法使用Angular的原生表单工具实现这一目标？

Answer 1

是的，表单状态对象将从表单名称派生的属性中插入到您的作用域/控制器中。

<section class="overview">
  <div ng-repeat="file in example.files">
    <div ng-class="{'file-invalid': example.fileForms[$index].$invalid}">
      File item "{{ file.name }}" is valid: {{example.fileForms[$index].$valid}}</div>
    </div>
</section>

<section class="forms">
  <form ng-repeat="file in example.files" 
  name="{{'example.fileForms.' + $index}}">

    <input ng-model="file.name" required>

  </form>
</section>

简单的例子是http://plnkr.co/edit/7LMLDi?p=preview

为了舒适的工作，最好使用ng-form表示内部表单，并使用form表单元素表示外部。如果其中一个内部表单无效，则外部表单将自动无效。示例在这里http://plnkr.co/edit/9m94AuNMR8J077Cakvgb

使用Angular检查表单是否在DOM的另一部分表单外部有效？

1 个答案: