2017-01-06 16 views
0

同じ入力フィールドを2組持っています。入力値は一意でなければなりません。だから私は、ユーザーが他の入力変数で繰り返す場合、エラーメッセージを表示する必要があります。例:「オプション1」グループ「小学校名1」の「希望学校」の値を入力した場合、他の入力欄に「希望学校」の値を入力しようとするとエラーメッセージが表示されるはずです。だから、私は角度に直面しているので、これをどのように角度で扱うことができるかについてのヘルプを探しています。あなたの助けに感謝。Angularjs - フォーム検証で2つ以上の入力値を比較する方法

FYI - 論理は、学校入力フィールドだけに適用する必要があります。 Notes入力値は複製できます。

Plunkerリンク:http://plnkr.co/edit/2sZZiFOLKUS8ewqlbck9?p=preview

<body ng-controller="empCtrl"> 
<div ng-repeat="school in areas.school"> 
    <div class="form-group"> 
    <label for="areas"></label> 
    <select name="area{{school.id}}" ng-model="areas.school[$index].type" ng-init="areas.school[$index].type = 'area1'"> 
     <option value="area1" selected="selected">Area 1</option> 
     <option value="area2">Area 2</option> 
    </select> 
    </div> 
    <div ng-show="areas.school[$index].type == 'area1'"> 
    <div class="form-group"> 
     <label for="elementary">Elementary school name {{school.id}}</label> 
     <input type="text" name="elementary{{school.id}}" placeholder="elementary school name" ng-model="areas.school[$index].elementary"/> 
      </div> 
      <div class="form-group"> 
       <label for="title">Middle school name {{school.id}}</label> 
       <input type="text" name="middle{{school.id}}" placeholder="middle school name" ng-model="areas.school[$index].middle" /> 
      </div> 
      <div class="form-group"> 
       <label for="Notes">Notes</label> 
       <input type="text" name="notes{{school.id}}" placeholder="Notes" ng-model="areas.school[$index].notes" /> 
      </div> 
     </div> 
     <div ng-show="areas.school[$index].type == 'area2'"> 
    <div class="form-group"> 
     <label for="elementary">Elementary school name {{school.id}}</label> 
     <input type="text" name="elementary{{school.id}}" placeholder="elementary school name" ng-model="areas.school[$index].elementary"/> 
      </div> 
      <div class="form-group"> 
       <label for="title">Middle school name {{school.id}}</label> 
       <input type="text" name="middle{{school.id}}" placeholder="middle school name" ng-model="areas.school[$index].middle" /> 
      </div> 
     </div> 
     <br/> 
    </div> 
</body> 

角度コード(これはありません検証ロジック):

// Code goes here 
var employeeApp = angular.module("EmployeeApp",[]); 
employeeApp.controller("empCtrl",function($scope){ 
$scope.areas = { 

}; 
$scope.areas.school = [ 
     { 
      'id': 1, 
      'type': '' 
     }, 
     { 
      'id': 2, 
      'type': '' 
     } 
    ]; 
}); 

答えて

1

は、他の入力ボックスのNGパターンへの1つの入力ボックスのモーダル値を渡します。

<input type='text' name='input1' ng-model = 'model1'/> 
<input type='text' name='input2' ng-model = 'model2' ng-pattern='model1'/> 

{{input2.$error.pattern}} 
+0

ありがとうございました! – Nikki

1

まず使用Angularjsモデルオプション

セクション1:

<input type="text" nd-model="school1" ng-required="school1==school2"/> 

セクション2:

<input type="text" ng-mode="school2" ng-required="school1==school2"/> 

警告:

<span ng-if="school!=school"> School Names Should be Same in 2 Sections</span> 
関連する問題