AngularJs validation, all inputs must have different values

Question

There can be 1 or more inputs. All inputs must have different values. How to create such validation(directive)? If user enters non-unique value in some input - it should be highlighted as invalid.

For now I just have html template without validation

<form name="myForm" id="myForm">
                <md-input-container ng-repeat="(key, item) in data">
                    <label>{{labels[item.id]}}</label>
                    <input ng-model="data[key].number" required>
                </md-input-container>

                <md-button ng-click="save()" class="md-raised md-button md-primary" ng-disabled="myForm.$invalid">
                    Save
                </md-button>
            </form>

Update. I managed to solve this with ng-change directive:

Template is the same except:

<input ng-model="data[key].number" name="number_{{key}}" required ng-change="validate(key, myForm)">

validate function in controller:

$scope.validate = function(key, myForm) {
        for (let i = 0; i < data.length; i++) {
            if(i == key) continue;

            if(data[i].number === data[key].number){
                myForm['number_' + key].$setValidity("unique", false);
                return;
            }else{
                myForm['number_' + key].$setValidity("unique", true);
            }
        }
    };

@MaximShoustin For now I just have html template without validation (edited question) — dr Anton
– dr Anton, Commented May 18, 2020 at 7:56

Ihor Yanovchyk · Accepted Answer · 2020-05-18 07:49:44Z

1

I would use ng-change instead of a directive. You can pass controlName and inputValue into your function and can do proper validation

answered May 18, 2020 at 7:49

Ihor Yanovchyk

7866 silver badges14 bronze badges

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

Comments

Maxim Shoustin · Accepted Answer · 2020-05-18 11:19:29Z

You can write some directive that blocklist prev typed values.

Something like:

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');
          ngModel.$parsers.unshift(function (value) {
            // here you can parse the data
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

and:

 <input ng-model="data[key].number" blacklist="data" required>

Some Demo

It will give you some insight

Collectives™ on Stack Overflow

AngularJs validation, all inputs must have different values

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related