I was able to implement auto-focus when you click a button taking you to the modal. Due to the following code:
AngularJS:
app.directive('autoFocus', function($timeout) {
return {
restrict: 'AC',
link: function(_scope, _element) {
$timeout(function(){
_element[0].focus();
}, 0);
}
};
});
HTML:
<input type="text" auto-focus>
However when applying the same logic to input boxes that are available after clicking on a button and going to a separate page, it doesn't seem to work. Has anyone encountered this before or experienced the same issue?
I have used the built in autofocus like this
<input ... autofocus="{{$index==0}}"/>
Have you tried that? No custom directive.
Related
I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:
If I remove the ng-click, the button doesn’t cause a page refresh.
If I comment out the code in the function, it doesn’t cause a page refresh.
If I change the button tag to an anchor tag (<a>) with href="", then it doesn’t cause a refresh.
The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.
Here is the form:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Here is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.
The thing to note in particular is where it says
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"
You can try to prevent default handler:
html:
<button ng-click="saveUser($event)">
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
You should declare the attribute ng-submit={expression} in your <form> tag.
From the ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit
Enables binding angular expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page).
I use directive to prevent default behaviour:
module.directive('preventDefault', function() {
return function(scope, element, attrs) {
angular.element(element).bind('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
And then, in html:
<button class="secondaryButton" prevent-default>Secondary action</button>
This directive can also be used with <a> and all other tags
You can keep <button type="submit">, but must remove the attribute action="" of <form>.
I wonder why nobody proposed the possibly simplest solution:
don't use a <form>
A <whatever ng-form> does IMHO a better job and without an HTML form, there's nothing to be submitted by the browser itself. Which is exactly the right behavior when using angular.
Add action to your form.
<form action="#">
This answer may not be directly related to the question. It's just for the case when you submit the form using scripts.
According to ng-submit code
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);
It adds submit event listener on the form.
But submit event handler wouldn't be called when submit is initiated by calling form.submit(). In this case, ng-submit will not prevent the default action, you have to call preventDefault yourself in ng-submit handler;
To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).
See Form submitted using submit() from a link cannot be caught by onsubmit handler
I also had the same problem, but gladelly I fixed this by changing the type like from type="submit" to type="button" and it worked.
First Button submits the form and second does not
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
Just add the FormsModule in the imports array of app.module.ts file,
and add import { FormsModule } from '#angular/forms'; at the top of this file...this will work.
I have some pre-written code by a developer, Which I have to modify, In that code, A directive is created using textboxe is used inside label, And I added another custom directive in that directive. So the final rendered HTML looks like.
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
As this div.customDropdown is inside label, whenever I click on dropdown, that click is going to textbox also.
So My question is, Is there any way to disable label feature of focusing input elements?
You can prevent the default action of the label's click event using jQuery.
$('label.myClass').click(function(e) {
e.preventDefault();
});
This does it in vanilla JavaScript:
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
I recommend you to use div or span at the place of the label and if you want you can write it before or inside that ..
I know its not simple but you can do it ..
I'm not sure if this is a bug or not, but here is what I'm trying to accomplish. I only care about google chrome as this is for debugging purposes. I want to use the html5 input type date and have it update a model. The problem comes in that if i select a date from the popup angular doesn't update it. If I instead use the arrows to run through dates it then updates it. Is there some other way to get the ngModel to update?
<div ng-app>
<input type="date" data-ng-model="date" style="width:200px;" />
<br>
{{ date }}
</div>
Here's a fiddle of it: http://jsfiddle.net/rtCP3/55/
Angular listens to the input event which seems to trigger when you click mouse up/down or click the errors. For some reason though (bug?) that event doesn't trigger from the calendar dialog.
I created simple directive which registers to the change event and then updates the model. You can see a working example here.
The directive is quite simple:
module.directive('dateFix', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
element.on('change', function() {
scope.$apply(function () {
ngModel.$setViewValue(element.val());
});
});
}
};
});
And then use it like this: <input type="date" ng-model="dateValue" date-fix />
A temporary workaround at least.
<form>
<input type="date" name="date" data-ng-model="date" style="width:200px;" />
</form>
and you have the value in : form.date.$viewValue;
Suppose I have input[type=file] element and I want to intercept onclick event and prevent file dialog from appearing if conditions are not met. Is it possible? And why, if - not?
Soufiane's code requires that you have a Javascript library called jQuery on your page. If you don't have it, you can get it at http://www.jquery.com or use something in plain Javascript:
HTML
<input type="file" id="openf" />
JS:
document.getElementById('openf').onclick = function (e) { e.preventDefault(); };
HTML:
<input type="file" class="openf" />
JS:
$('.openf').click(function(e){
e.preventDefault();
});
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.