如何将动态表单字段设置为脏或有角度的触摸？答案

【问题标题】：How to set a dynamic form fields to dirty or touched with angular?如何将动态表单字段设置为脏或有角度的触摸？
【发布时间】：2017-02-18 12:54:20
【问题描述】：

我有一个动态表单，它是由从某个 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>

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

【问题讨论】：

标签： angularjs forms validation dynamicform

【解决方案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>

【讨论】：

感谢您的回答，但我不想更改显示错误消息的条件。
您说要在表单加载时向用户显示错误消息，对吗？我没有更改任何内容，只是添加了$error，您可以将$touched 与它结合使用