동적 양식 필드를 더러워 지거나 각도를 사용하여 터치하는 방법은 무엇입니까?

내가 데이터를 수신, 당신이 볼과 here의 예 수, 일부 API에서 수신 된 데이터에 의해 생성되는 동적 인 형태를 갖는다는 다음과 같이이다 : 동적 양식 필드를 더러워 지거나 각도를 사용하여 터치하는 방법은 무엇입니까?

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

나는이 항목에 대한 동적 양식을 만들 수 있지만 당신이 plunkr, 나는이 일을 위해 두 가지 방법을 사용하고 볼 수있는 사람은 사용하여 다른 ng-form를 사용하고,

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

: 내 확인 메시지가 제대로 표시되지 않는 문제가있다, 그들은이 일 유사하다 양식 입력 이름의 보간법 :

<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'를 추가 한 것을 변경하지 않았고, $ touch와 함께 사용할 수 있습니다. – nivas

동적 양식 필드를 더러워 지거나 각도를 사용하여 터치하는 방법은 무엇입니까?

답변

관련 문제