Angularjs - How to compare more than two input values in a form validation

Question

I am having two sets of same input fields. The input value should be unique. So I should show an error message if user repeats in other input variables. Example: Let say if user entered "Hopes School" value in "Option 1" group "Elementary school name 1" input, we should show an error message if user tries to enter "Hopes school" value in other input fields. So looking for help on how we can handle this in angular since I am new to angular. Appreciate your help.

FYI - The logic should apply for school input fields alone. Notes input value can be duplicated.

Plunker link: 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>

Angular code(this doesn't have validation logic):

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

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

Eldelshell · Accepted Answer · 2017-01-06 12:17:54Z

1

Pass the modal value of one input box to the ng-pattern of other input box.

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

{{input2.$error.pattern}}

edited Jan 6, 2017 at 12:17

Eldelshell

6,9908 gold badges47 silver badges64 bronze badges

answered Jan 6, 2017 at 11:17

sonu singhal

2111 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Snopzer · Accepted Answer · 2017-01-06 10:43:07Z

1

First use Angularjs Model option

Section 1 :

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

Section 2 :

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

Warning :

<span ng-if="school!=school"> School Names Should be Same in 2 Sections</span>

answered Jan 6, 2017 at 10:43

Snopzer

1,72219 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angularjs - How to compare more than two input values in a form validation

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related