This is a bit complicated, but I've now verified it with both Angular Scenario tester and Protractor, and in the user interface.
Set up Twitter Bootstrap 3.x (I'm using the latest but had 3.0.3 before) - from the bower boostrap install
Set up Angular UI with the built-in templates (I'm using the angular-ui-bootstrap-bower library from Bower)
Set up a datepicker-popup field in Angular-UI like this:
<label for='due_date'>Due Date</label>
<input id='due_date'
class='form-control'
type='text'
datepicker-options="dateOptions"
datepicker-popup='yyyy-MM-dd'
ng-model="task.dueDate">
Add a button and a controller method to inspect the variable.
Testing:
Click on the date field, and type in a date: 2013-01-05
Hit escape or click on another field to close the popup dialog (i.e. don't click Done)
Submit the form
You'll find the date to be one day behind.
Interestingly, if you click on an actual date in the date picker, it will be correct. Including 'today'. If I remove the ui datepicker, it works fine with persisting the typed-in data. My date format is YYYY-MM-DD when I type it in.
This is maddening, as I've thought it was a bug in Angular Scenario, but once I figured out that Protractor ALSO fails, and that I could reproduce it by canceling the dialog, and even typing and submitting, I am beginning to think it has something to do with localization and timezones.
Anyone else run into this?
Here is a protractor test that fails:
it('should return one task', function () {
thePage.clearTasksButton.click();
thePage.newTaskButton.click();
thePage.taskDescription.clear();
thePage.taskDescription.sendKeys('A new task');
thePage.taskPriority.clear();
thePage.taskPriority.sendKeys('1');
thePage.dueDate.clear();
// pick today and dismiss the Angular DatePicker
thePage.todayButton.click();
thePage.createTaskButton.click();
var task = element.all(by.repeater('task in tasks').row(0).column('dueDate'));
task.then(function(elems) {
// should result in one row
expect(elems.length).toEqual(1); // this works
expect(elems[0].getText()).toEqual('2014-03-19'); // this is 2014-03-18
});
...
Thanks
Ken
Related
I have this tooltip on a input field:
<input id="chatMsg" uib-tooltip="something" tooltip-trigger="openTrigger" ng-model="chatMsg" />
and i want to show it on a custum trigger like this:
angular.element('#chatMsg').trigger('openTrigger');
but i can't get it to work, on my previus versions of ui-bootstrap-tpls it was working (0.12.1) now i've upgraded to 0.14.3
i've also configured the provider like this:
app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.setTriggers({
'openTrigger': 'closeTrigger'
});
}]);
Thanks.
From version 0.12.0 onwards, tooltip-trigger is no longer observable (so you are not able to change it programatically).
You can use tooltip-enable to get the same behavior. See more details here: https://github.com/angular-ui/bootstrap/issues/3372
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.
I am using angular-bootstrap-datetimepicker library from the below url:
Link to library
I am currently embedding the calender on the page.
I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.
Here is the sample code:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>
I am trying to highlight today's date automatically when the datetimepicker shows on the page.
As you can see, in the config options, i could set the default view and min view.
Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again.
Here is the link to Plunkr.
Any suggestions (regarding highlight today date by default) will be appreciated.
To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:
$scope.data = { embeddedDate: new Date() };
Working Plunkr
I'm designing an app using Ionic Framework / Angular / Cordova and have issues clearing old form values.
When a user logs in, he's routed to another view but when they switch back to the login view (after disconnecting), the login & password fields are still filled with old values.
So I know this question was asked many times here and the main solution is to set input attribute:
autocomplete="off"
But this has no effect.
I also added
document.getElementById('password').value = '';
in the login controller with no change.
How can I clear this values?
use autocomplete in js and put this line:
someFormElm.setAttribute( "autocomplete", "off" );
EX:
<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />
JS:
$(document).ready(function(){$("input").attr("autocomplete","off");});
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.