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>
Related
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
I have an Angular directive that includes a form with a datepicker. I am trying to create a function to keep the button click from calling submit on the form. I can not determine where to find the .opened attribute. When I was performing the open with ng-click everything worked. Below is sample code.
HTML:
<form ng-submit="editAlert.$valid && vm.handleSubmit()" name="editAlert" id="editAlert" class="buffer-bottom" novalidate>
<div class="form-group">
<label class="control-label" for="effectiveDate">Effective Date</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="MM-dd-yyyy" is-open="dpEffectiveDate.opened" ng-model="alertMsg.effectiveDateFmt" name="effectiveDate" id="effectiveDate">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="vm.openDateHandler($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
<p class="help-block" ng-show="editAlert.effectiveDate.$error.endBeforeStart">Effective date must be before expire date.</p>
</div>
</form>
I also tried passing dpEffectiveDate into the openDateHandler function.
Below is my Typescript function
openDateHandler = ($event) => {
$event.preventDefault();
//dpDate.opened = !dpDate.opened;
}
How do I access the .opened attribute?
If all you are trying to do is prevent the submit behaviour, simply add 'type="button"' to your button element.
<button type="button" class="btn btn-default" ng-click="vm.openDateHandler($event)">
By default, a button inside a form will act as a submit button unless it's given a different type.
You shouldnt need to mess with the opened state of a date picker to prevent a form submitting.
I have a form. Post submit, if the form is invalid, the error props out below the input fields.
One can hide the form using Cancel button.
The form can be displayed again using 'Show Form' button.
But the issue: The old form error still persists.
How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?
The reset, I should be able to do it from html itself and not from the controller.
Code below:
<form novalidate name="form.customForm">
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required && form.customForm.$submitted)">Name cannot be empty</span>
</div>
</div>
<div class="form-group">
<div>
<label>Age</label>
</div>
<div>
<input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required && form.customForm.$submitted)">Age cannot be empty</span>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
Submit
</button>
<button class="btn btn-default" type="button" ng-click="isForm = false;">
Cancel
</button>
</form>
Refer the demo.
I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.
form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();
The updated jsfiddle
On click on Cancel button, you could set
form.customForm.$submitted = false;
This will hide the error messages.
Your cancel button becomes:
<button class="btn btn-default" type="button"
ng-click="isForm = false; form.customForm.$submitted = false;">
Cancel
</button>
See jsfiddle
give the form a name:
<div ng-controller="BlaController as vm">
<form name="vm.formOne">
</form>
</div>
And in the controller do this: (thats how I made it work)
if (vm.formOne) {
vm.formOne.$setPristine();
vm.formOne.$setUntouched();
vm.formOne.$commitViewValue();
}
what about just change the cancel button type to "reset" ?? It's the easiest solution
<button class="btn btn-default" type="reset" ng-click="isForm = false;">
Cancel
</button>
$scope.cancel = function(form){
$scope.isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;
}
<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">
Fiddle Demo
Or
<button class="btn btn-default" type="button" ng-click="isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;" ng-show="!isForm">
Fiddle Demo
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 an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.