can you help to get the ng-model data
<input type="text" class="form-control" ng-model = "DateSchedule" required>
<button type="submit" ng-click="saveReservation()" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-plus"></i> Schedule</button>
in the script i already place the controller and app
alert($scope.DateSchedule);
it return me undefined
thanks
Related
I want to set min, max and init date to my uib datepicker?
What I have done doesn't work. I don't know where I am wrong.
HTML:
<input id="field_datePremierJour" type="text" class="form-control" name="datePremierJour" uib-datepicker-popup="{{dateformat}}"
ng-model="vm.conge.datePremierJour" is-open="vm.datePickerOpenStatus.datePremierJour"
datepicker-options="vm.optionsDate"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('datePremierJour')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
JS:
vm.optionsDate = {
minDate:new Date(2017,0,10),
maxDate:new Date(2017,0,30),
initDate:new Date(2017,0,10)
}
My guess is you either have to provide a valid Date object to ng-model or have an initDate
Datepicker popup
initDate (Default: null) - The initial date view when no model value is specified.
Either remove initDate and provide a valid date to ngModel or remove the ngModel.
Working solution
<input id="field_datePremierJour" type="text" class="form-control" name="datePremierJour" uib-datepicker-popup="{{dateformat}}"
ng-model="vm.conge.datePremierJour" is-open="vm.datePickerOpenStatus.datePremierJour"
min-date:"vm.minDate" max-date:"vm.maxDate"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('datePremierJour')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
I am working on a submit form and in order to make the form work optimally in IE I added ng-disabled to the submit button.
Example HTML
<form>
<input class="form-control" type="text" ng-model="form.name" required="">
<input class="form-control" type="number" ng-model="form.amount" required="">
<button type="submit" class="btn btn-default form-control" ng-disabled="!form.name || !form.amount " >
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>
The problem I'm getting is that I need to have a value of 0 be submitted but it is not working
You want your button to be disabled when the form is invalid. So give a name to your form (and your inputs):
<form name="myForm">
and use
ng-disabled="myForm.$invalid"
This is much cleaner: you don't have to add more conditions when you add fields to the form or other validators to your inputs.
You should process in ng-disabled form.name as text and form.amount as number, but you are processing as boolean.
<button type="submit" class="btn btn-default form-control" ng-disabled="form.name.lenght === 0 || form.amount === 0" >
In your controller you have to declare var form:
$scope.form = {
name: "",
amount: 0
}
In addition, in input type='number' you can establish min number.
<input class="form-control" type="number" ng-model="form.amount" min="0" required>
I hope help you, but last line confuses me a bit.
I have a form with multiple buttons. I want to have two different submit functions for each button. How can I achieve this?
<form id="loginForm" name="loginForm" ng-submit="submitForm()">
<div class="form-group">
<input type="text" class="form-control" id="userCompany" placeholder="Company" ng-model="user.companyId" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="userUsername" placeholder="Username" ng-model="user.userId" required>
</div>
<div class="form-group">
<input type="password" class="form-control" id="userPassword" placeholder="Password" ng-model="user.password" required>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button class="btn btn-default">Change Password</button>
<span ng-show="errorData">{{errorData}}</span>
</form>
I'm trying to make Change Password do changePassword() instead.
Remove ng-submit from your form element, and use ng-click on your two buttons:
<button type="button" class="btn btn-default" ng-click="submitForm()">Submit</button>
<button type="button" class="btn btn-default" ng-click="changePassword()">Change Password</button>
You need to specify that it's not a submit button, by adding a type="button" to it.
<button type="button" ng-click="changePassword()" class="btn btn-default">Change Password</button>
http://plnkr.co/edit/I5JkHiNnwmklHAKh3ag9?p=preview
<form ng-model-options="{ updateOn: 'submit' }">
<input type="text" class="form-control" ng-model="activeEditorData.startDate" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
<button type="button" class="btn btn-default" ng-click="$hide()">Cancel</button>
<button type="submit" class="btn btn-primary" ng-click="$hide()">Save changes</button>
</form>
I am having problems with ng-model-options and the angular-strap datepicker. The actual $scope.date is updated exactly as expected when pressing save, but the datepicker input date does not update as it should when changing dates. Is there some way to force the datepicker to update it's value or something?
If you remove the ng-model-options attribute it works as expected, but that removes the possibility to roll back all the data upon the cancel press, which is problematical for a bigger form.
So certain directives just doesn't seem to like two-way bindings outside the current parent scope, so I simply removed the ng-model-options and made a copy of the object.
Controller:
/**
* ng-model-options won't work with certain directives,
* so this is needed to replicate its behaviour.
*/
$scope.dataCopy = angular.copy($scope.activeEditorData);
$scope.save = function(hide) {
angular.forEach($scope.dataCopy, function(value, key) {
$scope.activeEditorData[key] = value;
});
$scope.exit(hide);
};
Html:
<form>
<input type="text" class="form-control" ng-model="dataCopy.startDate" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
<button type="submit" class="btn btn-primary" ng-click="save($hide)">Save changes</button>
</form>
I´m using the Bootstrap UI datepicker directive and I´m trying to have an datepicker button that opens the datepicker popup like in the original example but it does not work in a modal window.
See PLUNKER
What am I doing wrong?
Just change to: is-open="opened" to:
is-open="$parent.opened"
Fixed Demo Plunker
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.MM.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>
I had to put a timeout to make it work:
function toggleStart($event) {
$event.preventDefault();
$event.stopPropagation();
$timeout(function () {
vm.isStartOpen = !vm.isStartOpen;
});
}
My template looks like this:
<input type="text" class="form-control"
datepicker-popup ng-model="vm.startDate"
is-open="vm.isStartOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.toggleStart($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
datepicker directive creates its own scope which is not accessible outside.So to solve this you can use.
$parent.isopen
or use some Object property name to avoid prototype Inheritance, like
$scope.config.isopen=true;
ng-model="config.isopen" instead of ng-model="isopen".
You also work like that to initialize the date picker by icon.
HTML
<p class="input-group" ng-disabled="invoiceDateDisable">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JavaScript
$scope.open = function () {
$scope.opened = true;
};
You don't really need an open function:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>