如何設置一個動態的表單字段變髒或用角度觸摸？

我有一個是通過一些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

如何設置一個動態的表單字段變髒或用角度觸摸？

回答

相關問題