如何设置一个动态的表单字段变脏或用角度触摸？

我有一个是通过一些API接收到的数据生成一个动态的形式，你可以看到和例子吧here，接收到的数据是这样的：如何设置一个动态的表单字段变脏或用角度触摸？

$scope.users = [ 
     { 
     name: 'one', 
     email: '[email protected]' 
     }, 
     { 
     name: '', 
     email: '[email protected]' 
     }, 
     { 
     name: '', 
     email: '[email protected]' 
     } 
    ];

我创建这些项目动态的形式，但我有我的验证消息无法正确显示的问题，它们是类似这样的：

<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>

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

来源

2017-02-18 Rachmaninoff

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

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

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

<!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>

来源

2017-02-18 13:05:03 nivas

感谢您的答案，但我不想改变显示的错误消息的条件。 – Rachmaninoff

你说你想要显示错误消息给用户在表单加载权？我没有改变任何东西，只是增加了'$ error'，你可以使用'$ touched'来结合它 – nivas

如何设置一个动态的表单字段变脏或用角度触摸？

回答

相关问题