如何将动态表单字段设置为 dirty 或 touched with angular？

Question

我有一个动态表格，它是由从一些 api 接收到的数据生成的，你可以看到它的例子 here，接收到的数据是这样的：

$scope.users = [
      {
        name: 'one',
        email: 'one@one.com'
      },
      {
        name: '',
        email: 'two@two.com'
      },
      {
        name: '',
        email: 'three@three.com'
      }
    ];

我为这些项目创建了一个动态表单，但我有一个问题，我的验证消息没有正确显示，它们类似于这个：

<form name="usersForm">
        <div ng-form="subForm"  ng-repeat="user in users">

          <input name="name" type="text" ng-model="user.name" required />
          <p ng-if="subForm.name.$invalid && subForm.name.$touched">
            name is required
          </p>

          <input name="email" type="email" ng-model="user.email" required />
          <p ng-if="subForm.email.$invalid && subForm.email.$touched">
            email is required
          </p>

        </div>
     </form>

如您在 plunkr 中所见，我使用了两种方法来执行此操作，一种是使用 ng-form，另一种是在表单输入名称中使用插值：

<form name="usersForm2">
        <div  ng-repeat="user in users track by $index">

          <input name="name{{$index}}" type="text" ng-model="user.name" required />
          <p ng-if="usersForm2['name' + $index].$invalid && usersForm2['name' + $index].$touched">
            name is required
          </p>

          <input name="email" type="email" ng-model="user.email" required />
          <p ng-if="usersForm2['email' + $index].$invalid && usersForm2['email' + $index].$touched">
            email is required
          </p>

        </div>
     </form>

如何向用户显示我的验证消息（当加载或呈现表单时）？

Answer 1

查看更新后的 plunker 或运行下面的代码

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 
  $scope.users = [
      {
        name: 'one',
        email: 'one@one.com'
      },
      {
        name: '',
        email: 'two@two.com'
      },
      {
        name: '',
        email: 'three@three.com'
      }
    ];
    
    
 
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
      <div>
        First approach using ng-form
      </div>
    
     <form name="usersForm">
        <div ng-form="subForm"  ng-repeat="user in users">
         
          <input name="name" type="text" ng-model="user.name" required />
          <p ng-if="subForm.name.$invalid && subForm.name.$error">
            name is required
          </p>
          
          <input name="email" type="email" ng-model="user.email" required />
          <p ng-if="subForm.email.$invalid && subForm.email.$error">
            email is required
          </p>
          
        </div>
     </form>
     
     <div>
       second approach using interpolation
     </div>
     
      <form name="usersForm2">
        <div  ng-repeat="user in users track by $index">
         
          <input name="name{{$index}}" type="text" ng-model="user.name" required />
          <p ng-if="usersForm2['name' + $index].$invalid && usersForm2['name' + $index].$error">
            name is required
          </p>
          
          <input name="email" type="email" ng-model="user.email" required />
          <p ng-if="usersForm2['email' + $index].$invalid && usersForm2['email' + $index].$error">
            email is required
          </p>
          
        </div>
     </form>
     
  </body>
</html>

如何将动态表单字段设置为 dirty 或 touched with angular？

How to set a dynamic form fields to dirty or touched with angular?

forms

validation

angularjs

dynamicform