Angular has ng-focus to attach to a form-field to tell if it has focus.
But as I understand I cannot use ng-focus on the <form> itself. What would be the simplest way to tell if any field in a form has focus but without attaching ng-focus on each and every field? Say I have a large form with many fields, and I do want check each field...
Related
I having html form with angular-js and there is need to remove focus on required fields which are failed on submission.
Actually I am showing all error messages in Pop-Up box. So there is no need to focus on failed controls.
Please help me for it.
This depends on way you are starting you validation.
Assume you are doing this by clicking on some btn.
If so, you should create directive which will subscribe to the click event
and do focus to the document or other element you choose for this.
Don't forget to unsubscribe your listner from the element on $destroy event with .off()
If you are using another way for starting validation you should subscribe to it and do the same.
Hope this was helpful.
Previously I was using type="submit" for input #time of submitting form and Now by using type="button", resolved this issue.
I have one field that's not bind to any form element, but I would like to add required validation to it like I have for any other fields that are bind to some controls. I tried to use
<input type="hidden" name="requiredField" ng-model="vm.requiredField" required />
but while field was marked as $invalid and the whole form was still $valid.
Do you have any idea how to make such validation?
Eventually it looks like it should works. The reason why it doesn't work for me is because there was hidden code that changed $invalid field manually. I found it by using such script: https://github.com/paulirish/break-on-access
i am using angularjs' form stuff to gather user information. to get time i user <timpicker> it seems that this field is not set (ng-model of timepicker is null) if i call my ng-submit="submit()".
The only way i found so far is to call ng-change in timepicker and set a viable in scope which is then used in submit. Beside the fact that this is ugly, the main problem is if the user doesn't change the value (default is now) i don't have a time.
Is there a way to gather all ng-model variables in $scope on form's "ng-submit"?
EDIT It is not a problem of form its problem of timepicker. As soon as i change the time once the model gets filled (without the need of change method)
It will gather all ng-model variables on $scope that are set on input fields within the form. If you want to add a variable to your form without actually showing it on the screen, you can do:
<input type="hidden" ng-model="yourVariable" />
I would like to use the angular x-editable directive to work with a text field per the following
(a) I don't want to display buttons. I tried the buttons=no option but it does not seem to work with input of type text.
See the fiddle here.
(b) I want the underlying ng-model property to update immediately with each keystroke , without waiting for the user to focus out of the input. (as is default behavior with vanilla angular, eg. <input type=text ng-model="somepropertyname" />
How can one achieve (a) and (b) with angular x-editable? link to fiddle
Answer to 1(a) is to add the blur="submit" attribute (in addition to buttons="no")
I have an input box and Its bound with datepicker. In my view, there is small calendar icon besides this input box. I want to trigger click event of an input box when user clicks on this calendar icon. I have done this using directive which I have applied to calendar icon. But its almost like jQuery. So is there any different way to achieve this? If my approach is wrong then please guide me to the right direction. I am new to angular and I have read some articles where I read that avoid use of jQuery. Thanks
My Directive
myApp.directive('openCal',function($compile,$filter) {
return {
link:function(scope,element,attrs) {
element.bind("click",function() {
element.siblings("input").trigger("click");
});
}
};
});
Its working fine. But I am not sure that is it right approach or not??
No, if I understand what you are trying to do you are over-complicating things a bit.
In your case it looks like you would have something like:
<img open-cal/>
<input ng-click="doSomething()">
Where click on the img triggers a click on the input, via the openCal directive. Instead considering doing something like this:
<div ng-click="doSomething()">
<img>
<input>
</div>
If doSomething() needs to get data from the input, use ng-model to bind data from your input to your scope.
ALTHOUGH!
If you ever need to do a directive, that is the right way to do it. Using element.bind is not a problem since that is included in Angular. What you want to avoid is using stuff like $('.calendar').click and such.
Another way to approach this would be to add a <label> element for your input field that contains the calendar. Then clicking the calendar would focus the input field. Then all you'd have to do is listen for the focus event on your input field to do your extra work. This has the added bonus of working if someone navigates to your input field via the keyboard by hitting the tab key.