Considering 3 dates : myDate1, myDate2, myDate3.
I'd like to validate that myDate1 < myDate2 < myDate3
Dates are set by the date picker directive found in angular-ui.
Here is a plunker : http://plnkr.co/edit/FTcJNHxuv3RFtBCUw7Ck
I'm having difficulties founding the right way to do that.
I'm using ui-validate but it looks like when a condition is evaluated to false, the model is set to undefined.
Edit : It turns out that model being set to undefined is normal Angular behaviour. However there is a bug in the ui-validate directive. I'll update this post once it's resolved. See : https://github.com/angular-ui/ui-utils/issues/25
Please have a look at this fiddle. http://plnkr.co/edit/p0cq1idV6xTF2LyorQ06?p=preview.
Instead of using ui-validate i used ng-change and an extra scope variable formValid to track the validity of form.
Related
I use UI Bootstrap 1.3.2, Bootstrap 3.3.6 and Angularjs 1.5.5, but I'm having a problem with uib-datepicker-popup. If the value of the corresponding input field is null/not set, the calendar shows undefined date fields (null, NaN):
Code of input field:
<input type="text" uib-datepicker-popup="dd.MM.yyyy" datepicker-options="datepickerOptions" ng-model="mydto.teilnahmebis" />
The initDate option is ignored - code from controller:
$scope.datepickerOptions = {
minDate : new Date( '2010-01-01' ),
initDate : new Date()
};
The popup works if the input field already has a value. But normally that's not the case. Any idea, how to resolve this issue? Thanks for an answer.
I had the same problem, your ng-model variables is setting with a invalid date data...
check if you are overwriting your default value and set it as null
I think you might have done something wrong.
I have created a plunker code for you, and its working as it should be.
You can go through it.
https://plnkr.co/edit/Yz2shW?p=preview
Im working with angularjs/1.3.6 and v0.10.0/angular-material.js with a md-select field with name="txtGenero" but when the form have been Submitted with ajax the md-selected has a dot at beginning of name field like '.txtGenero' in the image below.
https://plus.google.com/photos/+TommyHern%C3%A1ndezA/albums/6175087393788917697/6175087392180342338?pid=6175087392180342338&oid=118016940134163401130
I hope can help me thanks.
I don't exactly know why the ngFormController has the .txtGenero field.
However you should use ngModel to bind your form fields to a model and post that model, not the form controller itself. You can use angular.element.param($scope.registro) to get the the fields from your model as form data.
You don't need jQuery for any of it.
Updated plunkr: http://plnkr.co/edit/IFOsFgiQBo7vJVzkBxaf?p=preview
(I updated to angular-material master)
Try to provide your code well formatted, this is kind of a mess to work with.
I recently asked this question about the changes to RegExp pattern validation that were introduced in AngularJS v1.3. The answer I received apparently solved my problem, but now I am trying to apply that approach, and I see that the behavior is again different in AngularJS v1.4.
Specifically, I want to apply pattern validation to a date input field, but the validation RegExp will be exposed as a property of the model, instead of being hard-coded into the form markup.
As suggested, I am specifying the name of the model property in the ng-pattern attribute ...
<input type="date" ng-model="myDate" name="myDate" ng-pattern="control.dateRegex" />
... and exposing the validation RegExp as a property of the model:
$scope.control = {
dateRegex: /^2015-\d+-\d+$/
};
This JSFiddle shows it working correctly with AngularJS v1.3 and this one demonstrates that the same implementation does not work with v1.4. I am unable to find any documentation that describes the correct implementation for use with v1.4.
Any suggestions please?
After asking a similar question on the AngularJS issues forum, I learned that this behavior is specific to date input validation. It arises because the model property used for date input binding has changed from a String to a Date object, which means that is no longer possible to use a RegExp to validate it.
It seems that the AngularJS team recognize this as a bug and that we can expect a fix in a forthcoming release. I will monitor the issue and update this thread when there is some progress.
I have the following code:
<form class="form"
data-ng-submit="modalSubmit(modal.data)"
id="modal-body"
name="modalForm"
novalidate>
This works and when I click on a button of type submit then the modalSubmit function is called.
However I would like to do this in my controller:
$scope.modalForm.$setPristine();
But it gives an error saying:
has no method '$setPristine'
How I can I set the form to pristine? I did try adding data-ng-form="modalForm" but then I get
a message saying something to the effect of duplicate directive names.
I tried changing the form element to a DIV but then the clicking on the submit button does not call
the function
Here's an example (modified from another user) that shows what I am trying to do which is set values to pristine:
plnkr.co/edit/LNanJdAggMLIgxii0cfv?p=preview
You're not doing anything wrong there, only problem is you're referencing an old version of angular in which $setPristine() was not a feature. $setPristine() was added in 1.1.+, so reference a newer version of angular and you're good to go. See it working in this plunk, using 1.2.+.
If you can't upgrade, then a dirty workaround would be to loop through all inputs in the form and set their $dirty and $pristine values manually:
$scope.mp = function() {
$scope.mainForm.$pristine=true;//clean main form
$scope.mainForm.$dirty=false;
angular.forEach($scope.mainForm,function(input){//clean all input controls
if (input !== undefined && input.$dirty !== undefined) {
input.$dirty=false;
input.$pristine=true;
}
});
}
First, your version of angular was old, 1.2.12 is the latest stable on the CDN. But even it wouldn't allow $setPristine because of the HTML5 validation that was going on.
The biggest problem was you used required on the fields instead of ng-required. The browser was doing the form validation for you instead of angular. You could also add the novalidate attribute to the form tag.
http://plnkr.co/edit/l1mUCceSFMFFZWgGgL6u?p=preview
it has already been implemented in this link you can use it this was as it has been demonstrated in the plnkr link.
As you can see from the above description, $setPristine only changes the state of the form (and thereby resets the css applied to each control in the form).
If you want to clear the values of each control, then you need to do for each in code.
I'm learning AngularJS and I have a question regarding the databinding for select elements. The databinding for textboxes works without any kind of event handling code. Once the ng-model attribute is set textbox updates when the model property changes and vice versa. There is no need for ng-change attribute.
However, for select elements we need to write functions that will be called via ng-change atribute.
Why does angularjs handle databinding without an ng-change attribute for textboxes but requires functions that will be called via ng-change attribute for select elements?
UPDATE:
Added the fiddle in the comments section. The example is from AngularJS in Action book. Click on one of the stories, change the textbox value and the model is updated. Change the selection in dropdown model is not updated.
UPDATE:
Added a new fiddle in the comments.
Thanks.
I've created a fiddle that works here - The issue is really just the dummy data here. In the original fiddle, the object created in the statuses array for {name:'Back Log'} and {name:'To Do'} are not the same (not ===) as the {name:'Back Log'} and {name:'To Do'} objects created in the dummy story objects.
To make the example work, I pass the indexed statuses into the getStories function. However I think this is really just a case of demo-induced confusion. (I've been looking at the MEAP for Angular in Action as well, and I think it could be simplified a bit like this one, that uses simple string statuses that will pass the === test
var getStories = function(statusesIndex) {
var tempArray = [
{title:'Story 00',
description:'Description pending.',
status: statusesIndex['To Do']
},
{title:'Story 01',
description:'Description pending.',
status: statusesIndex['Back Log']
}
];
return tempArray;
}
I think your confusion might be a result of the select documentation still being incorrect. (See my Disqus comment.) ng-model can and should be used with select. ng-change is optional and it just gives you a hook should you want to do something each time the selected option changes.
Normally you should use ng-options with select.
If i understood your question correctly then I think your guessing is wrong because for select boxes, you do not have to invoke ng-change event in order to fetch the selected option.
<select ng-model='select'>
<option>....</option>
<option value='one'>One</option>
<option value='Two'>Two</option>
</select>
// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>
Demo: http://jsfiddle.net/jenxu/1/