Validation on not required field - angularjs

I have three dropdowns to set unique orders value.
Html Code:-
<form name="submitForm" ng-submit="save(submitForm.$valid)" novalidate="novalidate">
<div class="form-group">
<label>Unique order:</label>
<label>First Step</label>
<select ng-model="myOrder.step[0]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>First Step</label>
<select ng-model="myOrder.step[1]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>First Step</label>
<select ng-model="myOrder.step[2]" ng-change="checked()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<button type="submit" class="btn btn-success">Save</button>
</form>
On these dropdowns I applied a filter.
Directive Code:-
return {
restrict: 'EA',
scope: {},
controller: function ($scope) {
$scope.myOrder = {};
$scope.myOrder.step = [];
},
link: function (scope, el, attrs) {
scope.checked = function() {
if (_.uniq(scope.myOrder.step).length !== scope.myOrder.step.length) {
scope.notify("error", "Please set unique order value");
}
};
scope.save = function(isValid) {
if (isValid) {
if (!scope.values) {
ApiServices.updateOrderSet(scope.myOrder).then(function (response) {
scope.notify('success', response.data);
scope.values = false;
});
} else {
ApiServices.updateAddSet(scope.myOrder).then(function (response) {
scope.notify('success', response.data);
});
}
} else {
scope.notify('error', 'There are errors on the form');
}
};
},
What I want is if user set same values on dropdowns i.e., not unique ,then on save button it notifies scope.notify("error", "Please set unique order value"); also the form doesn't submit. Please note that these are not required fields.I tried $submitted too but doesn't work.Can anyone tell me what should I do here to make it work.

Related

AngularJS ng-options not populating from Promise values

I have a select box which bind the data from the database.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>
Below is the loadCountries function
$scope.loadCountries = function () {
var resultList = mainService.loadCountries();
resultList.then(function (response) {
$scope.countries = response.data;
$scope.selectedCountry = $scope.countries[0];
});
}
Also here is the loadcountires code in service
function mainService($http) {
this.loadCountries = function () {
var result = $http({
method: 'GET',
url: '/API/Country/Countries'
});
return result;
}
}
When I checked countries list, it is populating succesfully, but not binding to ng-options in the select box.
Can anyone help me with this please !!
Change ng-options like this and try.
<div class="select__wrapper-inner" data-ng-init="loadCountries()">
<select id="country" ng-model="selectedCountry"
ng-options="country as country.CountryName for country in countries">
<option value="" selected>Select your option</option>
</select>
</div>

In Angular: on selecting option from dropdown I want to search in search field with that value

I am new to angular and I am stuck...
I want to create a dropdown as shown in this image where the placeholder in the textbox depends on the selected option from the dropdown.
My html is
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
My controller is defined as:
var companyInfo = angular.module('companyInfo', []);
companyInfo.controller('searchExample', ['$scope', '$http',function($scope, $http){
$scope.searchCriteria = ['Name', 'Employee Id', 'Designation', 'Email','Phone No']
$http.get("data/data.json").then(function(data){
$scope.employeeDetails= data.data;
});
$scope.searchInTable = function(searchName){
$scope.searchVal = searchName;
}
}]);
You can try this data-ng-change binds the event on change of select with the specified function
<select class="selectpicker" ng-options="search for search in searchCriteria" ng-model="searchWith" data-ng-change="search()">
<option value="">Select : </option>
</select>
<input type="text" ng-model="searchName" class="form-control" placeholder="Search with {{searchWith}}" />
and in your controller
$scope.search = function(){
$scope.searchName = $scope.searchWith;
}

Ng-models not accessible

One of the ng-models gives null value. When I click the button with the function setNewRecord the parameter selectedDocument is null. The first two parameters are correct. The javascript code is added as well.
<form name="myForm" >
<div>
<select ng-model="selectedCompany">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selectedDocument" ng-click="getTypes(selectedCompany, enteredCustomer)">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord(selectedCompany, enteredCustomer,selectedDocument)"/>
Java Script
myApp.service('getDocTypesService', ['$http', '$q', function($http, $q) {
var allSettings = null;
this.getDocTypes = function(compName, custName) {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetDocTypes', {
companyName: compName,
customerName: custName
})
.then(function(response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);
myApp.controller('myController', ['$scope', 'getDocTypesService',
function($scope, getDocTypesService) {
$scope.getTypes = function(comp, cust) {
getDocTypesService.getDocTypes(comp, cust).then(function(value) {
$scope.docSettings = value
});
};
}
]);
Try replacing the select for selectedDocument with this:
<select ng-model="selectedDocument"
ng-click="getTypes(selectedCompany, enteredCustomer)"
ng-options="docSetting.Doc_Type for docSetting in docSettings track by docSetting.Doc_Type">
</select>

How change http on change select?

I want to build a category filter in my angular application. I have a select option dropdown. If I select an other category I want to load an other http request. Each category have a different URL to call.
My controller:
.controller('activiteitenCtrl', function($scope, $http) {
if(selectCategory == 1){
$scope.groep = "http://www.example.com/?id=1";
}
if(selectCategory == 2){
$scope.groep = "http://www.example.com/?id=2";
}
else{
$scope.groep = "http://www.example.com/?id=3";
}
$scope.loadData = function () {
$http.get($scope.groep, {cache:false})
.success(function(data) {$scope.activiteiten = data.posts; });
}
$scope.loadData();
})
My template:
<select>
<option value="0">Recent</option>
<option value="1">Groep 1</option>
<option value="2">Groep 2</option>
<option value="3">Groep 3</option>
<option value="4">Groep 4</option>
<option value="5">Groep 5</option>
<option value="6">Groep 6</option>
<option value="7">Groep 7</option>
<option value="8">Groep 8</option>
</select>
I tried ng click but that's not working. how i get the value of the select menu in the controller and reload the data with the loadData() function? so that the items form te selected category appear in the view?
Your view should be something like this:
<select ng-model="selectCategory" ng-change="selected()">
<option value="0">Recent</option>
<option value="1">Groep 1</option>
<option value="2">Groep 2</option>
<option value="3">Groep 3</option>
<option value="4">Groep 4</option>
<option value="5">Groep 5</option>
<option value="6">Groep 6</option>
<option value="7">Groep 7</option>
<option value="8">Groep 8</option>
</select>
And in your controller you need to create the callback function that is executed when the value of the select box changes:
$scope.selected = function() {
if($scope.selectCategory == "1"){
$scope.groep = "http://www.example.com/?id=1";
}
if($scope.selectCategory == "2"){
$scope.groep = "http://www.example.com/?id=2";
}
else{
$scope.groep = "http://www.example.com/?id=3";
}
$scope.loadData();
}
Example: http://plnkr.co/edit/4pBvvL4MUn09HrjwSPtC?p=preview

AngularJS Validation

Hi I want to create a custom directive to do form validation. I have a form with checkboxes and some text fields. I want to make sure the user doesn't leave any of the fields empty.
When the user leaves a form empty after pressing submit, I want the directive to highlight the border of the field red. My problem is that when I make an isolate scope directive it doesn't work. When it isn't an isolate scope, all the fields turn red when only one is empty. How can I fix this?
directive.js:
directive('createprofileformerrormsg', function() {
return {
scope:{createprofileformerrormsg:'#'},
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
scope.$watch('formErrors', function() {
if (attr.createprofileformerrormsg == 1) {
elem.css("border", "red solid 1px");
}
});
}
}
});
form.html
<form data-ng-submit="createProfile()">
Ethnicity: <select createprofileformerrormsg="{{formErrors.ethnicity}}" data-ng-
model="ethnicity" >
<option value="Asian">Asian</option>
<option value="Black">Black</option>
<option value="Caucasian">Caucasian</option>
<option value="Hispanic">Hispanic</option>
<option value="Middle Eastern">Middle Eastern</option>
<option value="Native American">Native American</option>
<option value="Other ethnicities">Other ethnicities</option>
</select><br/>
Gender: <select createprofileformerrormsg="formErrors.ethnicity" data-ng-
model="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</form>
Controller.js
$scope.createProfile = function() {
if ($scope.ethnicity == null) {
$scope.formErrors.ethnicity = 1;
error_count++;
}
if ($scope.gender == null) {
$scope.formErrors.ethnicity = 1;
error_count++;
}
}
Try this:
Javascript
app.controller('MainCtrl', function($scope) {
$scope.submit = function() {
$scope.$broadcast('submit');
}
})
.directive('highlightOnError', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
scope.$on('submit', function() {
var border = '';
if (ngModel.$invalid)
border = 'red solid 1px';
element.css('border', border);
});
}
};
});
HTML
<body ng-controller="MainCtrl">
<form ng-submit="submit()" novalidate>
<input type="text" ng-model="foo" required highlight-on-error />
<select ng-model="bar" ng-options="option for option in [1, 2, 3]"
required highlight-on-error>
<option value="">choose a number</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
Working Plunker here.

Resources