angularjs drop down showing nothing selected when loading first time [duplicate] - angularjs

This question already has answers here:
How do I set default value of select box in angularjs
(7 answers)
Closed 7 years ago.
I have a drop down using angularjs but at initial loading it showing 'nothing selected' ,I want select First value default.
<select id="cbo-db-selection" ng-init="selectedlibrary=selectedlibrary[0].value" ng-model="selectedlibrary" required="required" ng-options="opt.DatabaseName as opt.DatabaseName for opt in DBLibraries">
<option style="display:none" value="">{{selectedlibrary}}</option>
</select>

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.users = [
{id: 1, name: 'Me'},
{id: 2, name: 'You'}
];
});
app.directive('select', function () {
return {
restrict: 'E',
require: '?ngModel',
priority: 10,
link: function postLink(scope, elem, attrs, ctrl) {
if (!ctrl) { return; }
var originalRender = ctrl.$render.bind(ctrl);
ctrl.$render = function () {
originalRender();
if (elem.val() === '?') {
ctrl.$setViewValue(undefined);
}
};
}
};
});
.error {
color: Red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" ng-form="form1">
<select ng-model="userId">
<option ng-repeat="user in users"
value="{{user.id}}">
{{user.name}}
</option>
</select>
<div class="error" ng-show="form1.select1.$invalid">Required field !</div>
<div class="error" ng-show="form1.$invalid">Invalid form !</div>
<br />
<button ng-click="userId=1;">Set valid value</button>
<button ng-click="userId=3;">Set invalid value</button>
<hr />
<pre>userId: {{userId}}</pre>
</div>

Related

AngularJS - input type="number" not clearable for non-number (NaN)

Clear number input type does not work for 'e' number
When I clear the input field with input eee in number type, it does not get cleared. Any other input numbers get cleared. Check the JSFiddle. Any hints would be appreciated.
http://jsfiddle.net/2ankx9up/
<div ng-app="app">
<div ng-controller="MainCtrl">
<input type="number" class="form-control" data-ng-model="searchAll">
</input>
<a class="clear" href="" data-ng-click="clearSearch()">X</a>
</div>
</div>
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {
$scope.searchAll = "";
$scope.clearSearch = function () {
$scope.searchAll = "";
};
});
The ng-model directive is unable to clear the content of an <input type="number"> element when that content parses to NaN (not a number). This can happen when a user pastes invalid content or simply types "eee".
One fix is to add a custom directive:
app.directive('clearNan', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$formatters.push(function(value) {
if (!value) elem.val(null);
return value;
});
}
};
})
Usage:
<input type="number" clear-nan ng-model="x" />
The DEMO
angular.module('numfmt-error-module', [])
.directive('clearNan', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$formatters.push(function(value) {
if (!value) elem.val(null);
return value;
});
}
};
})
.run(function($rootScope) {
$rootScope.typeOf = function(value) {
return typeof value;
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="numfmt-error-module">
<input clear-nan type="number" ng-model="x" />
<br>
{{ x }} : {{ typeOf(x) }}
<br>
<button ng-click="x=''">Clear input</button>
</body>

AngularJS datetimepicker directive not work when change value

I have a problem with datetimepicker in AngularJS. When the page loaded, datetimepicker directive run, and I got the right value I want. But when I chose another date, directive does not work, although I have to change the event inside.
A few days ago, It worked, but not now. I tested many times. I don't know why, because I didn't change anything.
The code:
.directive("datetimeselect", [
"Config", function (Config) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datetimepicker({
format: Config.defaultConfig.dateTimeFormat
});
el.on('dp.change', function (event) {
scope.$apply(function () {
var date = moment(event.date);
ngModel.$setViewValue(date.format(Config.defaultConfig.dateTimeFormat));
});
});
//format text from the user (view to model)
ngModel.$parsers.push(function (data) {
return moment(data).format(Config.defaultConfig.dateTimeFormat);
});
//format text going to user (model to view)
ngModel.$formatters.push(function (data) {
return moment(data).format(Config.defaultConfig.dateTimeFormat);
});
}
};
}
])
And this is HTML
<div class="form-group col-md-6">
<label for="ToTime" class="control-label">To Time</label>
<input type="text" class="form-control" name="ToTime" id="ToTime"
ng-model="record.ToTime" datetimeselect />
</div>
The $parser is unnecessary and the $formatter needs to set the date:
function postLink(scope, element, attr, ngModel) {
var ignoreChangeEvent = false;
element.datetimepicker();
element.on('dp.change', function(event) {
if (ignoreChangeEvent) {
ignoreChangeEvent = false;
return;
}
scope.$apply(function() {
ngModel.$setViewValue(event.date);
});
});
ngModel.$formatters.push(function (date) {
ignoreChangeEvent = true;
element.data("DateTimePicker").setDate(date);
});
}
The DEMO
angular.module('bootstrap-timepicker', [])
.directive('datetimepicker', [
function() {
return {
restrict: 'A',
link: postLink,
require: 'ngModel'
};
function postLink(scope, element, attr, ngModel) {
var ignoreChangeEvent = false;
element.datetimepicker();
element.on('dp.change', function(event) {
if (ignoreChangeEvent) {
ignoreChangeEvent = false;
return;
}
scope.$apply(function() {
ngModel.$setViewValue(event.date);
});
});
ngModel.$formatters.push(function (date) {
ignoreChangeEvent = true;
element.data("DateTimePicker").setDate(date);
});
}
}
])
.controller('IndexController', function($scope) {
$scope.date = new Date();
});
<link rel="stylesheet" href="//unpkg.com/bootstrap#3/dist/css/bootstrap.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap#3/dist/css/bootstrap-theme.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-datetime-picker#2.3/css/bootstrap-datetimepicker.css">
<script src="//unpkg.com/jquery#2"></script>
<script src="//unpkg.com/bootstrap#3/dist/js/bootstrap.js"></script>
<script src="//unpkg.com/moment"></script>
<script src="//unpkg.com/eonasdan-bootstrap-datetimepicker#3/src/js/bootstrap-datetimepicker.js"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="bootstrap-timepicker">
<div class="container" ng-controller="IndexController">
<h4>Datetimepicker</h4>
<div class="form-group">
<div class='input-group date' datetimepicker ng-model="date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p>
ng-model value: {{date}}
</p>
<div class='input-group date' datetimepicker ng-model="date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>

AngularJS - write custom directive to validate passed values

I have an html form that looks like this :
<div class="row col-lg-offset-3">
<div class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors >
<label class="control-label">Age</label>
<input type="text" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age"/>
</div>
</div>
Directive:
(function(){
angular.module('myApp', [])
.controller('studentDataController', function($scope) {})
.directive('showErrors', function() {
return {
restrict: 'A',
require: '^form',
link: function (scope, el, attrs, formCtrl) {
var inputEl = el[0].querySelector("[Age]");
var inputNgEl = angular.element(inputEl);
var inputValue = inputNgEl.attr('Age');
var isValid = (inputValue >= 3 && inputValue < 100);
inputNgEl.bind('blur', function() {
el.toggleClass('has-error', isValid);
})
}
}
});
})();
I am trying to validate input for Age field when it blurs out.Age value should be between 3 to 99.i.i.e check if the value is valid or invalid when user is done typing and leaves the text field.Then if the value is invalid, apply the has- class
The directive though is not working. Did I miss anything ?
If really have to do that via custom directive please see below:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app
.directive('ngAge', NgLength);
function NgLength() {
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, $element, $attrs, ngModel) {
$scope.$watch($attrs.ngModel, function(value) {
var isValid = (value > 3 && value < 100);
ngModel.$setValidity($attrs.ngModel, isValid);
});
}
}
}
/* Put your css in here */
.has-error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
<label class="control-label">Age</label>
<input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />
</form>
</body>
AngularJS 1.3.x introduces $validators pipeline - it is much simpler to write custom validation rules with them.
A collection of validators that are applied whenever the model value changes. The key value within the object refers to the name of the validator while the function refers to the validation operation. The validation operation is provided with the model value as an argument and must return a true or false value depending on the response of that validation.
var app = angular.module('app', []);
app
.controller('MainCtrl', function($scope) {
$scope.name = 'World';
}).directive('ngAge', function NgLength() {
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, $element, $attrs, ngModel) {
ngModel.$validators.validAge = function(modelValue, viewValue) {
var age = modelValue || viewValue;
return age > 3 && age < 100
};
}
}
});
.has-error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<body ng-app="app">
<form name="userForm" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}">
<label class="control-label">Age</label>
<input type="text" class="form-control" name="Age" ng-model="user.Age" ng-age placeholder="Age" />
</form>
</body>
You can use max, min directive. Please sample below
var app = angular.module('plunker', []);
.has-error {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<html ng-app="plunker">
<body>
<div class="row col-lg-offset-3">
<form name="userForm" class="form-group col-lg-6" ng-class="{ 'has-error': userForm.Age.$invalid && userForm.Age.$dirty}" show-errors>
<label class="control-label">Age</label>
<input type="number" class="form-control" name="Age" ng-model="user.Age" ng-required='!user.phonenumber' placeholder="Age" max="100" min="3" />
</form>
</div>

Angular setValidity not working?

I first using setValidity to make a directive in Angular.but not as my expected,here is my code:
angular.module('myApp', [])
.controller('ctrl',function($scope){
$scope.pw='';
})
.directive('pwCheck', function(){
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
elem.on('keyup', function () {
scope.$apply(function () {
var len = elem.val().length;
if(len===0){
ctrl.$setValidity('zero',true);
} else if(len>1 && len<6){
ctrl.$setValidity('one',true);
} else {
ctrl.$setValidity('two',true);
}
});
});
}
};
});
HTML:
<body ng-controller="ctrl">
<form id="myForm" name="myForm">
<input type="text" ng-model="pw" pw-check />
{{myForm.$error}}
<div class="msg-block" ng-show="myForm.$error">
<span class="msg-error" ng-show="myForm.pw.$error.zero">
Input a password.
</span>
<span class="msg-error" ng-show="myForm.pw.$error.one">
Passwords too short.
</span>
<span class="msg-error" ng-show="myForm.pw.$error.two">
Great.
</span>
</div>
</form>
</body>
Online Demo:
http://jsbin.com/cefecicu/1/edit
I think you need:
//Reset your validity
ctrl.$setValidity('zero',true);
ctrl.$setValidity('one',true);
ctrl.$setValidity('two',true);
if(len===0){
ctrl.$setValidity('zero',false);
} else if(len>=1 && len<6){ //use len>=1 instead
ctrl.$setValidity('one',false);
} else {
ctrl.$setValidity('two',false);
}
Using false to indicate errors (not valid):
And give a name to your input:
<input type="text" ng-model="pw" name="pw" pw-check />
http://jsbin.com/cefecicu/11/edit

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