How to validate lodash filter? - html

Question

I have three dropdowns:-
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<label>1st</label>
<select ng-model="a.value[0]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>2nd</label>
<select ng-model="a.value[1]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<label>3rd</label>
<select ng-model="a.value[2]">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Controller code:-
$scope.a.value = [];
$scope.func = function () {
if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is that it should not saved if the values in the dropdowns are not unique. What validations should I apply and where?

Answer 1

What you have made looks like an initiative way to identify duplicate values using lodash. Theoretically your implementation should work. Did you try ?
Ideally you should check for the duplicates values when the user tries to select the value for better user experience. One way of doing that is you can remove the values selected in the 1st dropdown in the subsequent dropdowns and so on.

Answer 2

in your js add:-
$scope.allModels = {
firstDD: 'One',
secondDD: 'Two',
thirdDD: 'Three'
}
and then in your html to all Dropdowns use
<select ng-model="$scope.allModels.firstDD">
<select ng-model="$scope.allModels.secondDD">
<select ng-model="$scope.allModels.thirdDD">
eventiually in save function look for them
$scope.save = function(){
if($scope.allModels.firstDD != $scope.allModels.secondDD != $scope.allModels.thirdDD){
//do the thing you want or post it to server
}
}