I have a requirement that I need to let user only enter digits and - into date picker and prevent user from entering other characters, how can I achieve this?
for example I want prevent user from entering text like asasdfas in input field for datepicker.
I used this code in parseDate function inside uibDatepicker code but view doesn't get updated.
var regex = /[^0-9\-]/g;
viewValue = viewValue.replace(regex, '');
here is a plunk to play around: http://plnkr.co/edit/AKFhTG162Ck5Blt0ZBH7?p=preview
Changing the input type to date restricts the user from inputting any extra text.
<input type="date" />
The problem is that enables the HTML5 default date picker. I have added a little css to hide that part but you would need to check it other browsers. I was unable to remove the arrows and again I will leave you to do it.
Hope it helps. I forked your PLUNK HERE
Related
I have quantity:number variable and quantityArray: number[] array. In my template i have two buttons and one input field. when i click the buttons or when i change input field quantity must increment or decrement. and quantityArray must change its length according to quantity. When i click buttons everything works fine. But when i change the input field quantity changes but length of quantityArray is not changing
here's link
Ensure the value is treated as number
return new Array<number>(Number(qty));
Plunker example
Change input type to "number". It's text for now.
<input type="number" [ngModel]="quantity" (ngModelChange)="qtyChange($event)">
I am setting input field to invalid from javascript like this:
$scope.formName.fieldName.$setValidity("string", false);
This is working, but it affects the view only after clicking in a input field and then clicking out of it.
How can I change it in order to see the invalid field immediatelly?
You'll need to attach an ng-change="checker(model)" to your input field. Then just apply an ng-class to it to check for formName.fieldName.$error.string (since you put string as the error key) or you can also do formName.fieldName.$invalid && !formName.fieldName.$pristine
I've attached this codepen for you to play around with and see how to apply an invalid class on the field without having to lose focus on it.
Hope that helps!
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
I'm trying to get this directive (https://github.com/eight04/angular-datetime) to work in my project. It works alright in the following plunk:
http://plnkr.co/edit/DawLbi?p=preview
But when I plug in the same code (below) into my larger scale project, it doesn't work and I have no idea why and where to search.
<input type="text" datetime="dd.MM.yyyy" ng-model="vm.firstDate" class="form-control" data-z-validate />
What happens: The input displays the formatted date correctly, but when I click on the year (or some other component) and try to change it using the number keys (enter a new year), it clears out the whole field (upon entering the first digit)! Using the up/down arrow keys works.
The problem happens only when I use the data-model on a breeze-entity. If I just put a simple js Date object on my controller and link to that one, it works.
I also tried extending my breeze entity like so:
function registerRechnungRec(metadataStore) {
metadataStore.registerEntityTypeCtor(g14EntityNames.rechnung, RechnungRec, postCtorInitializer);
function RechnungRec() {
this.datumExt = moment().toDate(); // doesn't work
}
function postCtorInitializer(rechnung) {
// this works, but not tracked by breeze then
rechnung.datumExtDate = moment(rechnung.datum).toDate();
}
// also no luck with that one:
// http://stackoverflow.com/questions/26982624/angular-and-breeze-edit-date-object
//addDateWrapperPropertyExt(RechnungRec, 'datum', 'datumExtDate');
}
A normal input with type date works just fine for entering/selecting the date. But I need to do some momentjs formatting afterwards to save the date correctly to the database then before I call entityManager.save(). Also, I don't really need the whole date picker component, a simple date input is all we need.
So how do I find out what's going wrong where?
Or is there another suggested date input directive/component, or an easier way to just have a text input field that allows me to input a date (no time) or a null date?
I'm developing an app containing a form which has a text input with ng-model="description".
Now I want to validate this text input using ng-maxlength="50" and required. This works fine, but I also want to add a character counter (like 67/50) shown at all times. I'm using the following code to display the counter: {{description.length || 0}}/50
The issue with this, however, is that description.length doesn't return a value when it's greater than 50, because description input is invalid. In my scenario the counter would default to 0/50 when there's no input (and that's fine) but also when input exceeds max length.
I would also like to display my counter in red when the input length's invalid, but that shouldn't be too hard using angular validation css classes.
Of course I could provide custom validation, but I'm positive there's an easier solution.
Use the form element $viewValue instead like this:
<form name='form'>
<input type="text" name='description' ng-model='description' ng-maxlength="50">
{{form.description.$viewValue.length || 0}}/50
</form>
See this plunker