How to add bootstrap datetime picker in angularjs - angularjs

I am developing an app using angularjs. I need to add date time picker to my form. but not sure how to add it.


you can use this
angularjs-datetime-picker
:)
var app = angular.module('myApp', ['angularjs-datetime-picker']);
app.run(function($rootScope) {
$rootScope.gmtDate = new Date('2015-01-01 00:00:00 -00:00');
});
app.controller("ctrl", function($scope) {
$scope.model = "1/1/1991";
$scope.rows = ['Paul', 'John', 'Lucie'];
$scope.temp = false;
$scope.addRow = function() {
$scope.temp = false;
$scope.addName = "";
};
$scope.deleteRow = function(row) {
$scope.rows.splice($scope.rows.indexOf(row), 1);
};
$scope.plural = function(tab) {
return tab.length > 1 ? 's' : '';
};
$scope.addTemp = function() {
if ($scope.temp) $scope.rows.pop();
else if ($scope.addName) $scope.temp = true;
if ($scope.addName) $scope.rows.push($scope.addName);
else $scope.temp = false;
};
$scope.isTemp = function(i) {
return i == $scope.rows.length - 1 && $scope.temp;
};
});
body {
padding: 20px;
}
.search {
margin-left: 10px;
}
<!DOCTYPE html>
<html ng-app="myApp" ng-init="
date1='01-01-2015 00:00:00';
date2='Thu Jan 01 2015 00:00:00 GMT-0500 (EST)';
date3='2015-01-01T00:00:00-0400';
date4='2015-01-01';">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2#0.2.2/angularjs-datetime-picker.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angularjs-datetime-picker-v2#0.2.2/angularjs-datetime-picker.css">
<!-- -->
<!-- <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<input ng-model="date4" datetime-picker date-only /> <br>
<input ng-model="date1" datetime-picker="" date-only="" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only /> <br>
<input ng-model="date2" datetime-picker="" date-format="yyyy-MM-dd" size="30" date-only="" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <br> <input ng-model="date3" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false"
/> <br>
<input ng-model="date3" datetime-picker="" date-format="yyyy-MM-dd HH:mm:ss" close-on-select="false" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> <input ng-model="date4" datetime-picker hour="23" minute='59'/><br>
<input ng-model="date4" datetime-picker="" hour="23" minute="59" size="30" class="ng-pristine ng-valid ng-valid-date ng-touched"> <br> <br> gmtDate : "2020-01-01T11:58:00.000Z"<br> <input type="date" ng-model="gmtDate" size="30" /><br>
<input datetime-picker ng-model="addName" />
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h2>
<form class="form-horizontal">
<span ng-class="{'input-append':addName}">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
</span>
<span class="search input-prepend" ng-class="{'input-append':search}">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" class="span2" placeholder="Search" ng-model="search">
<button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
</span>
</form>
<table class="table table-striped">
<tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
<td>{{$index+1}}</td>
<td>{{row}}</td>
<td>
<button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
</table>
</body>
</html>

Related

Angular Help List App

I'm creating an Angular app that adds info to a list but I can't seen to get the item to post. I want the use to add info to the form then the info is then add to the responsive table. I'm not sure if the function for the inputs are correct. Check out my code below.
angular.module('LumpSumApp', [])
.controller('LumpSumController', function() {
var lumpSumList = this;
lumpSumList.addLumpSum = function() {
lumpSumList.lumpsums.push({ select: lumpSumList.lumpSumType, done: false });
lumpSumList.lumpSumType = '';
lumpSumList.lumpsums.push({ select: lumpSumList.lumpSumCategory, done: false });
lumpSumList.lumpSumCategory = '';
lumpSumList.lumpsums.push({ text: lumpSumList.lumpSumEstimate, done: false });
lumpSumList.lumpSumEstimate = '';
lumpSumList.lumpsums.push({ text: lumpSumList.lumpSumExpenses, done: false });
lumpSumList.lumpSumExpenses = '';
lumpSumList.lumpsums.push({ file: lumpSumList.lumpSumQuote, done: false });
lumpSumList.lumpSumQuote = '';
lumpSumList.lumpsums.push({ file: lumpSumList.lumpSumReceipt, done: false });
lumpSumList.lumpSumReceipt = '';
};
});
<form class="form-inline" ng-submit="lumpSumList.addLumpSum()">
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumType">
<option>Select a Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumCategory">
<option>Select a Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumEstimate" size="40" placeholder="Estimated Expenses">
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumExpenses" size="40" placeholder="Actual Expenses">
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumQuote" style="display: none;">
</label>
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumReceipt" style="display: none;">
</label>
</div>
<input class="btn btn-primary" type="submit" value="add">
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Expense Type</th>
<th>Expense Category</th>
<th>Estimated Expenses</th>
<th>Actual Expenses</th>
<th>Upload Quote(s)</th>
<th>Upload Receipt(s)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lumpsum in lumpSumList.lumpsums">
<td>{{lumpSumList.lumpSumType}}</td>
<td>{{lumpSumList.lumpSumCategory}}</td>
<td>{{lumpSumList.lumpSumEstimate}}</td>
<td>{{lumpSumList.lumpSumExpenses}}</td>
<td>{{lumpSumList.lumpSumQuote}}</td>
<td>{{lumpSumList.lumpSumReceipt}}</td>
</tr>
</tbody>
</table>
</div>

I reworked your code with changes to handle an array of objects.
The two keys here are the changes to the controller code and the changes to the HTML.
In the JavaScript, we first initialize the lumpSumList.lumpsums when the controller loads. Then, inside the function, each time the addLumpSum button is clicked, we create a new object to hold all the properties from the dropdowns, then push this object into the array.
In the HTML, we output the lumpsum values, rather than the dropdown values. Just as a quick fix, I also added value='' to the default options in the dropdown to get rid of the empty option.
angular.module('LumpSumApp', [])
.controller('LumpSumController', function() {
var lumpSumList = this;
lumpSumList.lumpsums = [];
lumpSumList.addLumpSum = function() {
var lumpsum = {
lumpSumType: lumpSumList.lumpSumType,
lumpSumCategory: lumpSumList.lumpSumCategory,
lumpSumEstimate: lumpSumList.lumpSumEstimate,
lumpSumExpenses: lumpSumList.lumpSumExpenses
};
lumpSumList.lumpsums.push(lumpsum);
lumpSumList.lumpSumType = '';
lumpSumList.lumpSumCategory = '';
lumpSumList.lumpSumEstimate = '';
lumpSumList.lumpSumExpenses = '';
};
});
<!DOCTYPE html>
<html ng-app="LumpSumApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LumpSumController as lumpSumList">
<form class="form-inline" ng-submit="lumpSumList.addLumpSum()">
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumType">
<option value=''>Select a Type</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="lumpSumList.lumpSumCategory">
<option value=''>Select a Category</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumEstimate" size="40" placeholder="Estimated Expenses">
</div>
<div class="form-group">
<input class="form-control" type="text" ng-model="lumpSumList.lumpSumExpenses" size="40" placeholder="Actual Expenses">
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumQuote" style="display: none;">
</label>
</div>
<div class="form-group">
<label class="btn btn-primary">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
<input type="file" ng-model="lumpSumList.lumpSumReceipt" style="display: none;">
</label>
</div>
<input class="btn btn-primary" type="submit" value="add">
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Expense Type</th>
<th>Expense Category</th>
<th>Estimated Expenses</th>
<th>Actual Expenses</th>
<th>Upload Quote(s)</th>
<th>Upload Receipt(s)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="lumpsum in lumpSumList.lumpsums">
<td>{{lumpsum.lumpSumType}}</td>
<td>{{lumpsum.lumpSumCategory}}</td>
<td>{{lumpsum.lumpSumEstimate}}</td>
<td>{{lumpsum.lumpSumExpenses}}</td>
<td>{{lumpsum.lumpSumQuote}}</td>
<td>{{lumpsum.lumpSumReceipt}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

ng-model in angularJS is not working

I have ASP.NET MVC application and I am trying simple example where submit form is handle by ng-submit and alert value of input using angularJS. my first part of angularJS (display record in table ng-repeat) is working but not form, not sure what I am missing here!
https://jsfiddle.net/toxic_kz/srs69ppp/2/
HTML
<div>{{ "Two plus Two equals: " + (2+2) }}</div>
<div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in vm.trips">
<td>{{ trip.name }}</td>
<td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
<td>Manage</td>
</tr>
</table>
<form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">New Trip Name</label>
<input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<label>Testing Button</label>
<input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
</div>
<div class="form-group">
<input class="btn btn-success btn-sm" type="submit" value="Add" />
</div>
</form>
</div>
AngularJS
(function () {
"use strict";
angular.module("app-trips", []);
})();
(function () {
"use strict";
angular.module("app-trips")
.controller("tripsControllers", tripsController);
function tripsController()
{
var vm = this;
vm.trips = [{
name: "US trip",
created: new Date()
},
{
name: "World trip",
created: new Date()
}
];
vm.newTrip = {};
vm.addTrip() = function () {
alert(vm.newTrip.name);
};
}
})();

I have added your code in a plunker to make it work.
app.js:
var app = angular.module('plunker', []);
app.controller('tripsControllers', function($scope) {
var vm = this;
vm.trips = [{
name: "US trip",
created: new Date()
},
{
name: "World trip",
created: new Date()
}
];
vm.newTrip = {};
vm.addTrip = function () {
alert(vm.newTrip.name);
};
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body>
<div>{{ "Two plus Two equals: " + (2+2) }}</div>
<div ng-controller="tripsControllers as vm" class="col-md-6 col-md-offset-3" style="width:100%">
<table class="table table-responsive table-striped">
<tr ng-repeat="trip in vm.trips">
<td>{{ trip.name }}</td>
<td>{{ trip.created | date: 'dd-MM-yyyy'}}</td>
<td>Manage</td>
</tr>
</table>
<form novalidate name="NewTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">New Trip Name</label>
<input class="form-control" type="text" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<label>Testing Button</label>
<input class="btn btn-success" type="button" value="testing" id="testA" ng-click="alert('testing A Button')" />
</div>
<div class="form-group">
<input class="btn btn-success btn-sm" type="submit" value="Add" />
</div>
</form>
</div>
</body>
</html>
https://plnkr.co/edit/7X73A8GidqIzF91fmlkK

In angularjs dynamic button creation is correct but validation is not correct

in my code buttons are created correctly but after typing the first row,click Add fields.the close button is disabled in first row.but i want only disable in current typing row.other close buttons are enable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js">
</script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div> <br>
<fieldset data-ng-repeat="choice in choices track by $index ">
<br>
<div class="form-group"> <input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/"placeholder="Category Item View Count" required>
<p class="help-block" ng-show="frm.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries">
</div>
<div class="form-group">
<option value=''>Choose</option>
</select>City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.item_name.$invalid||frm.item_desc.$invalid " >Save</button>
<span class="help-block" style="color:red"ng-show="frm.cat_desc.$error.pattern" style:"color:red">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red"ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block"style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span > </div>
<div id="choicesDisplay">
{{ newItemNo }}
</div>
</form>
</div>
</body>
</html>
okay. js (angular File)
var app=angular.module('testApp', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function() {
$scope.choices.splice(this.$index,1);
};
$scope.countries = {
'Andhra': [{
'id': '01',
'city': "Guntur"
}, {
'id': '02',
'city': "Hyderabad"
}],
'Tamilnadu': [{
'id': '03',
'city': "CBE"
}, {
'id': '04',
'dep': "Trichy"
}]
};
});

You had a few issues in your HTML that I cleaned up but primarily your issue was that you needed to perform your validation on just the current row. So you can add an ng-form attribute along with your ng-repeat to create a scope per row. The resulting HTL looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="okay.js"></script>
</head>
<body ng-app="testApp">
<div ng-controller="MainCtrl">
<form name="frm" class="form-inline" novalidate>
<div class="form-group">
<input type="string" name="cat_name" class="form-control" ng-model="cat_name" placeholder="Enter Category Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" name="cat_desc" class="form-control" ng-model="cat_desc" placeholder="Enter Your Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<br>
<fieldset data-ng-repeat="choice in choices track by $index" ng-form="formChoice">
<br>
<div class="form-group">
<input type="text" ng-model="choice.itemName" class="form-control" name="item_name" placeholder="Category Item Name" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="text" ng-model="choice.itemDesc" class="form-control" name="item_desc" placeholder="Category Description" ng-pattern="/^[a-zA-Z]*$/" required>
</div>
<div class="form-group">
<input type="number" ng-model="choice.itemView" class="form-control" name="item_count" ng-pattern="/^[0-9]/" placeholder="Category Item View Count" required>
<p class="help-block" ng-show="formChoice.item_count.$error.pattern">numbers only allowed</p>
<select id="country" ng-model="choice.states" name="state" ng-options="country for (country, states) in countries"></select>
</div>
<div class="form-group">
<option value=''>Choose</option>
City:
<select id="state" ng-disabled="!choice.states" name="city" ng-model="one">
<option value="">Choose</option>
<option ng-repeat="state in choice.states" value="{{state.id}}">{{state.city}}</option>
</select>
</div>
<button ng-click="removeChoice()" class="remove btn btn-danger" ng-disabled="!formChoice.item_name.$dirty||!formChoice.item_desc.$dirty||!formChoice.item_count.$dirty||!formChoice.state.$dirty||!formChoice.city.$dirty||formChoice.item_name.$invalid||formChoice.item_desc.$invalid">close</button>
</fieldset>
<br>
<button class="addfields btn btn-success" ng-click="addNewChoice()" ng-disabled="frm.$invalid">Add fields</button>
<button class="addfields btn btn-success" ng-disabled="!frm.item_name.$dirty||!frm.item_desc.$dirty||!frm.item_count.$dirty||!frm.state.$dirty||!frm.city.$dirty||frm.$invalid||frm.item_desc.$invalid ">Save</button>
<span class="help-block" style="color:red" ng-show="frm.cat_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_desc.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.cat_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<span class="help-block" style="color:red" ng-show="frm.item_name.$error.pattern">ERROR:<BR/>text only allowed</span >
<div id="choicesDisplay">{{ newItemNo }}</div>
</form>
</div>
</body>
</html>

Unable to fetch value using angular

I'm unable to get through a piece of code using angular js.
Actually I'm trying to fill in a form and pass data using AngularJS. I'm able to fetch all data except the date input textfield, which is populated on the click of a button and displayed on textfield.
Here's my code:
<div ng-controller="EmployeeController">
<form name="frmEmp" novalidate>
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" required />
Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" required />
Date of Birth:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-sm calendar-icon" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
</span>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
</div>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save(emp)" />
</form>
</div>
And my controller looks like below:
myApp.controller('EmployeeController', ['$scope',function ($scope) {
$scope.Save = function (emp) {
alert("In employee\'s Save function\n" + emp);
$scope.emp = {
EName: emp.EName,
Salary: emp.Salary,
Dob: emp.Dob
};
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}
My concern is that I'm able to fetch Ename and Salary. But Dob returns 'undefined'.
For the datepicker i'm using the following script.
<script type="text/javascript">
datepickr('.calendar-icon', { altInput: document.getElementById('calendar-input'), dateFormat: 'd-m-Y' });
</script>
One more fact. I'm familiar with JQuery and trying to make my application purely on AngularJS.
Any help in this regard would be greatly appreciated.
Sorry for my poor English.:-)
Here's the plunk code:
PlunKr

Here is a working plnkr of your example.
The solution is to use bootstrap-tpls for angular integration, then you have access to datepicker directive.
Instead of your input, I just added:
I also made a few improvements in your controller (Save function param removed, emp object initialization on controller creation) and on save button (form validation, usage of ng-form directive). so final solution looks like this:
Html:
<head>
<meta charset="utf-8" />
<title>AngularJS demo</title>
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"> </script>
<script src="angular-ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="EmployeeController">
<div ng-form="frmEmp">
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" ng-required="true" /> Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" ng-required="true" /> Date of Birth:
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="emp.Dob" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="opened = true"> <i class="glyphicon glyphicon-calendar"></i></button>
</span>
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save()" ng-disabled="frmEmp.$invalid" />
</div>
</body>
Controller:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('EmployeeController', ['$scope', function($scope) {
$scope.emp = {};
$scope.Save = function() {
//alert("In employee\'s Save function\n" + $scope.emp);
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}])
And please make sure to have the css included.

Why does ng-messages for form validation not work when using $rollbackViewValue

I have a form using ng-messages for form validation error messages. Im also using the new ng-model-options with $rollbackViewValue to rollback all changes to the form. Problem is ng-mesages will not work if I use the rollbackViewValue on the form.
I really like this new function in angular1.3 using ng-model-options to reset a form as I have not found anything that works as well as $rollbackViewValue()
Heres is the code and plunker
<!DOCTYPE html>
<html data-ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form"
data-ng-submit="vm.submit()"
data-ng-model-options="{updateOn: 'submit'}" >
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="form.$rollbackViewValue()">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
<script src="scripts.js"></script>
</body>
</html>
controller
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl',function ($scope, $rootScope) {
var vm = this;
vm.names = {
fname: "Albert",
lname: "Capone"
}
});

You would need to make the form pristine and revert back the touched state as well. You can do so by calling the special functions, $setPristine() and $setUntouched() , on the formController. But it appears rollBackViewValue works with ngSubmit, but it is only to revertback during some action, (like esc key, another button). But if the form field has contraint errors it appears it updated viewvalue to nullify the entered value. You could try this way by resetting to default field values.
In your view:-
<button type="button" class="btn btn-default"
data-ng-click="vm.reset(form)">reset</button>
In your controller:-
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue();
form.$setPristine(); //Set pristine state
form.$setUntouched(); //Set state from touched to untouched
vm.names = angular.copy(defModel); //reset model
}
var App = angular.module("App", ['App', 'ngMessages']);
App.controller('formCrtl', function($scope, $rootScope) {
var vm = this;
var defModel = {
fname: "Albert",
lname: "Capone"
};
vm.names = angular.copy(defModel);
vm.reset = function(form) {
form.$rollbackViewValue(); //Probably can be removed
form.$setPristine();
form.$setUntouched();
vm.names = angular.copy(defModel);
}
});
<div data-ng-app="App">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container" data-ng-controller="formCrtl as vm">
<div class="col-lg-5">
<form name="form" novalidate="novalidate" role="form" data-ng-submit="vm.submit(form)" data-ng-model-options="{updateOn: 'submit'}">
<!---->
<div class="form-group" data-ng-class="{ 'has-error': form.fname.$invalid && form.fname.$touched }">
<label for="fname">First Name</label>
<input type="text" required class="form-control" name="fname" id="fname" placeholder="Enter text" data-ng-model="vm.names.fname">
<div data-ng-if="form.fname.$touched" data-ng-messages="form.fname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="form-group" data-ng-class="{ 'has-error': form.lname.$invalid && form.lname.$touched }">
<label for="lname">Last Name</label>
<input type="text" required class="form-control" name="lname" id="lname" placeholder="Enter text" data-ng-model="vm.names.lname">
<div data-ng-if="form.lname.$touched" data-ng-messages="form.lname.$error">
<span class="help-block" data-ng-message="required">required field</span>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10 btn-group">
<button type="submit" class="btn btn-primary" data-ng-disabled="form.$invalid">Submit</button>
<button type="button" class="btn btn-default" data-ng-click="vm.reset(form)">reset</button>
<!---->
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-messages.js"></script>
</div>

Resources