Hi,
I have one form in that i am going do some validations
everything is working fine except at dropdowns
In dropdowns it was displaying validation by default
I don't need to display like that after clciking of submit button only i need to display validation message on required field
After clciking of submit button i need to clear the fields if everything is fine and don't want to display validation message by default
Please look at my screenshot https://ibb.co/d6dwCCk
Note: If i can remove select directive on scripting at that time
validation is not displaying by default.
@{
Layout = null;
}
<html ng-app="myApp">
<head>
<title></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script src="~/scripts/dirpagination.js"></script>
<script>
var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
$scope.mahesh = false;
GetCategory();
function GetCategory() {
debugger;
$scope.categories = [];
$http({
method: 'Get',
url: '/editdropdown/GetCategory',
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.AddEmployeeDiv = function () {
$scope.mahesh = $scope.mahesh ? false : true;
GetCategory();
ClearFields();
$scope.Action = "Add";
}
$scope.AddUpdateEmployee = function (isValid) {
if (isValid) {
$scope.mahesh = false;
alert("Form is valid");
$scope.userForm.$setPristine();
}
else {
$scope.mahesh = true;
// Show error Message if Form not valid.
if ($scope.userForm.$error.required != undefined) {
for (var i = 0; i < $scope.userForm.$error.required.length; i++) {
$scope.userForm.$error.required[i].$pristine = false;
}
}
}
}
function ClearFields() {
$scope.Id = "";
$scope.Name = "";
$scope.CategoryName = "";
}
}]);
</script>
</head>
