I'm switching my form validation from thymeleaf to angularjs and I have some problem with daterangepicker. For angular I read about datarangepicker for angular so I would like to use it to store startdate and enddate in my form field. This is my HTML modal code:
<div class="modal" id="addLicenseModal" data-ng-app="myApp">
<div class="modal-dialog" id="addLicenseModaController" data-ng-controller="freeUserController">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">New license</h4>
</div>
<div class="modal-body">
<div data-ng-show='users.length > 0'>
<form novalidate class="simple-form" name="newLicenseForm">
<!-- form start -->
<div class="box-body">
<div class="form-group" id=existingUser>
<label>Username</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newLicense.username" required> <ui-select-match
placeholder="Select username">
{{$select.selected.username}}</ui-select-match> <ui-select-choices
repeat="user.username as user in (users | filter: $select.search) track by user.username">
<span data-ng-bind="user.username"></span> </ui-select-choices> </ui-select>
</div>
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
data-ng-model="newLicense.date" required/>
</div>
<div class="form-group">
<label>Execution number</label><span id="errmsg"
style="float: right; color: red"></span> <input
data-ng-model="newLicense.counter" id="executionNumber" type="number"
class="form-control" placeholder="executionNumber" min="0" required>
</div>
<div class="form-group">
<label>MAC address</label> <input id="macAddress" type="text"
class="form-control" data-ng-model="newLicense.macAddress" maxlength="25"
placeholder="MAC address" required>
</div>
<div class="form-group">
<label>CPU ID</label> <input id="cpuId" type="text"
class="form-control" data-ng-model="newLicense.cpuId" maxlength="25"
placeholder="CPU ID" required>
</div>
</div>
</form>
</div>
<p data-ng-show="users.length == 0">All clients have the own
license, you can update a license with UPDATE button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-show='users.length > 0' data-ng-disabled="newLicenseForm.$invalid"
data-ng-click="createLicense(newLicense)" id="createLicenseButton"
type="button" class="btn btn-primary">Create license</button>
<button data-ng-show='users.length == 0' id="createLicenseButton"
type="button" class="btn btn-primary" disabled>Create
license</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
In javascript I have this code
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.datePicker.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
I receive exception Cannot set property 'date' of undefined on $scope.datePicker.date = {startDate: null, endDate: null};
row. Has someone used this plugin to store form information?Thanks
Your problem is in data-binding and specifically here:
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" data-ng-model="newLicense.date" required/>
because $scope.newLicense.date is never defined.
To solve this problem, this line of code:
$scope.datePicker.date = {startDate: null, endDate: null};
should be like :
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
also in your ajax post your data should be $scope.newLicense
so your controller should be like:
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : $scope.newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
this is a working demo