Как установить динамические поля полей для грязных или коснутых углов?

У меня динамический вид, который генерируется по данным, полученным от некоторого апи, вы можете увидеть и пример этого 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

Как установить динамические поля полей для грязных или коснутых углов?

ответ

Смежные вопросы