ダイナミックフォームフィールドをダーティに設定する方法、または角度でタッチする方法はありますか？

私がデータを受け取った、あなたが見るとそれhereの一例することができ、いくつかのAPIから受信したデータによって生成される動的なフォームを持っているが、このようなものです：ダイナミックフォームフィールドをダーティに設定する方法、または角度でタッチする方法はありますか？

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

は、私はこれらの項目の動的なフォームを作成しますが、私私の検証メッセージが正しく表示されていない問題を抱えている、彼らはこの1つに似ています：

<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で見ることができるように、私は1つがng-formを使用しており、他が使用して、これを行うための2つのアプローチを使用していましたフォーム入力名の補間：

<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

ダイナミックフォームフィールドをダーティに設定する方法、または角度でタッチする方法はありますか？

答えて

関連する問題