I'm using Angular UI Datepicker. It's behavior is correct on all tested browsers except IE9. On IE9 when i choose some date, then open datepicker again and click on "Clear" button(native button coming from the directive) then "null" text is shown in datepicker's input field.
I have found a related question about that issue. The problem is that in IE whenever javascript sets the input value to a variable which is null then the input field is filled up with the text "null". So the solution for IE9 is to do
document.getElementById('some_id').value = someVar || ''
instead of
document.getElementById('some_id').value = someVar;
but that solution is not applicable for my case because the value of input is being set in the code of directive and i don't want to change that code because dependency is coming from bower and can be updated in future.
The only thing i can do is to write an angular watcher for datepicker model value setting it to empty string in case when it's value becomes null or undefined, but i don't like that solution as i need to do that for each and every page where datepicker is used.
Any idea ?
Related
By default, Parsley only handles updating a single element's class (usually the input field in which the invalid entry is). However, with Bootstrap 4 we must update both the form-group and the input field classes to render them with the validation icons. Otherwise, only the border colour is changed.
How can I use Parsley to correctly, completely style my input fields when validating user input in the client?
In order to correctly style Bootstrap 4 with Parsley, you must modify the classes of the div.form-group surrounding your input fields (assuming you want the validation icons, like I did).
According to the documentation you need to add .has-success or .has-danger to the div.form-group and then specify form-control-success and form-control-danger respectively to the input fields.
However, Parsley only supports updating the class on a single element by default. Fortunately, it supports event binding, so with a little function added to the end of your parsley.js file, we can handle updating the div.form-group styles when the user has fixed a validation error.
First configure Parsley:
errorClass: "form-control-danger",
successClass: "form-control-success"
These are the correct classes to apply to the input fields, which Parsley works on by default. Next, append the following to the parsley.(min).js file.
window.Parsley.on('field:validated', function(e) {
if (e.validationResult.constructor!==Array) {
this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success');
} else {
this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger');
}
});
The above will listen for when fields have been validated, and, hence update the relevant div.form-group according to the Bootstrap 4 documentation to ensure that the input field gets rendered appropriately.
I'm using the Ext.form.field.Tag component. I have configured
createNewOnEnter:true,
createNewOnBlur:true,
forceSelection:true
but if I type in a value that's not the in the dropdown list/store records and tab-out or click enter the value gets selected. I want the value to be selected on enter/blur ONLY if it exists in the dropdown. But when createNewOnEnter and createNewOnBlur are set to true, forceSelection becomes false. I verified this by setting a debugger in the "change" event handler.
I dont have a fiddle but you can copy paste the above config into the live editor in the API Docs here
thanks
There are some configurations that are incompatible with each other, and ExtJS does not provide for all thinkable configurations of components (although they try, but then, Tagfield is quite new). This is the relevant part of the form/field/Tag.js file that explains your experience:
if (me.createNewOnEnter || me.createNewOnBlur) {
me.forceSelection = false;
}
To get what you want, you would have to override some parts of the tag field definition to suit your needs. You should look into overriding the assertValue and the onKeyUp functions.
The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.
It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.
Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?
---------------------Update--------------
I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview
So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.
And I think the problem is around this line:
$scope.selectedService = null;
Thanks!
All I need to fix is to add this line in the select tag:
<option value="">Please Select...</option>
If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.
How can I implement typeahead like functionality (autosuggestion), keeping the nice "material design" in AngularJS (https://material.angularjs.org)
You cans Autocomplete field.
The documentation is at
https://material.angularjs.org/latest/demo/autocomplete
This is possible using Autocomplete in Angular Material; however it is not immediately obvious from the documentation.
The demo only matches characters at the beginning of the result due to specifying the caret flag, ie: md-highlight-flags="^i"
To allow autocomplete to find any matching characters you should use the global flag, ie: md-highlight-flags="gi"
You will also need to change the state.value.indexOf(lowercaseQuery) === 0 line in the filterFn function to state.value.indexOf(lowercaseQuery) !== -1
Check this codepen for a working example:
http://codepen.io/DevVersion/pen/KrOYoG
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.