Angularjs - 如何在表单验证中比较两个以上的输入值

时间:2017-01-06 10:36:55

标签: angularjs

我有两组相同的输入字段。输入值应该是唯一的。因此,如果用户在其他输入变量中重复,我应该显示一条错误消息。示例:如果用户输入" Hopes School"值"选项1"小组"小学名称1"输入,如果用户试图进入"希望学校"我们应该显示错误信息。其他输入字段中的值。所以寻找帮助我们如何处理这个角度,因为我是角色的新手。感谢您的帮助。

仅供参考 - 逻辑应仅适用于学校输入领域。 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': ''
        }
    ];
});

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

将一个输入框的模态值传递给其他输入框的ng模式。

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

{{input2.$error.pattern}}