I have a form with an input text field as well as a button. I'd like to capture the user pressing enter in the text field - not to submit the form, but to trigger another action. The button has its own separate click handler that for some reason gets fired when I press enter in the text field.
example:
http://jsfiddle.net/T8zLq/1/
<form onsubmit="return false" ng-submit="mysubmit()" ng-controller="TestCtrl" ng-app="Test">
<input type="text" />
<button ng-click="test()">X</button>
</form>
var app=angular.module("Test", []);
app.controller("TestCtrl", ["$scope", function($scope) {
$scope.test = function() {alert('lol'); };
$scope.mysubmit = function() {alert('submit');};
}]);
Why does this happen?
set type='button' to your button
<form ng-submit="mysubmit()" ng-controller="TestCtrl">
<input type="text" />
<button ng-click="test()" type='button'>X</button>
</form>
Demo
More
Related
I have html template:
<div ng-controller="MyController">
<form novalidate>
Name: <input type="text" ng-model="user.name" />
<button ng-click="greet(user)">GREET</button>
</form>
</div>
And I add it like this:
"<div ng-include src=\"'/views/template.html'\"></div>"
This is function in MyController:
$scope.user = {}
$scope.greet = function (user) {
alert('hello ' + user.name)
}
But when I click on button it makes submit it doesn't call greet function.
I also tried to add type="button" to it but it is the same.
Here is the working solution so I don't know what I am missing.
use type="submit" with the submit button, and input instead of button.
I want my controller to perform some action when a user clicks in a form field (when the form field gets focus). How can I do this? See this plunker.
Here is my controller:
angular.module('myApp', [])
.controller('AppCtrl', ['$scope',
function($scope) {
$scope.field1 = "Default text";
$scope.focus = false;
$scope.formFieldJustGotFocus = function() {
$scope.focus = true;
// Do all the stuff I need to happen when the form has just gotten focus
}
}
]);
And here is the view:
<body ng-app="myApp" ng-controller="AppCtrl">
<h3>Testing</h3>
<p>I want to perform some action in the controller when a form field gets focus. How can I best achieve this?</p>
<form name="myForm">
<input type="text" name="field1" ng-model="field1">
</form>
<p>Form field has focus: {{focus}}</p>
</body>
You can use the ngFocus directive. The inverse is ngBlur.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-focus="isFocused = true" ng-blur="isFocused = false">
<p ng-if="isFocused">Focus !</p>
</div>
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus()">
use like this ng-focus
Try ng-focus.
See more info:
https://docs.angularjs.org/api/ng/directive/ngFocus
use -> ng-focus
<input type="text" name="field1" ng-model="field1" ng-focus="formFieldJustGotFocus();">
this plunker
in the code he had written the function formFieldJustGotFocus(), but it was not bound to the focus event
This works fine
<head>
<script>
function UsersCtrl($scope) {
$scope.info = "The buttons haven't been clicked yet";
$scope.signupfolks = function () {
$scope.info = "You've cliked the first radio option!"
$scope.actionyo = "/users/session";
};
$scope.loginfolks = function () {
$scope.info = "You've cliked the second option!";
$scope.actionyo = "/users/session2";
};
}
</script>
</head>
<body>
<div ng-controller="UsersCtrl">
<form action="/users/session" method="post">
<input type="radio" ng-model="CurrentFolks" ng-change="signupfolks()" name="NewFolks" id="optionsRadios1" value="NewFolks3">
<input type="radio" ng-model="CurrentFolks" ng-change="loginfolks()" name="NewFolks" id="optionsRadios2" value="CurrentFolks3">
<button type="submit">Sign In</button>
{{info}} <!-- verifies the angular's working for this example -->
</div>
This breaks it
changing
<form action="/users/session" method="post">
to
<form action="{{actionyo}}" method="post">
But in the "view source" it says
When I don't have an option button selected, it says:
<form action method="post">
When I select an option button, the source says:
<form action="/users/session" method="post">
But when I hit the submit button... it won't go. Nothing happens.
I guess because before you hit any option button, actionyo has no value yet?
Try to set a value first in your controller:
function UsersCtrl($scope) {
$scope.actionyo = "/users/session"; //set a default. WARNING: IS THIS THE DEFAULT YOU WANT?
$scope.info = "The button haven't been clicked yet";
// all the rest of your code
I am trying to append an element to the DOM from user text input using AngularJS.
The desired behaviour is:
User types string into input ng-model "newTask"
Presses enter key
Dynamic element is then appended to the DOM
The relevant section of HTML is as follows:
<div class="add-task">
<input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>
<div class="task-list">
<a class="task"><span class="text">{{ newTask }}</span></a>
</div>
Currently the HTML is instantly updated. How can I bind this event to only happen after enter keypress? The AngularJS UI is also loaded.
Many appreciations,
an AngularJS newbie
Try creating a temp value
Html:
<input type="text" placeholder="Type then press enter to create task" ng-model="tmpTask" ng-keypress="saveTask($event)" />
Your ng-model binds to a tmpTask property. Only when enter is pressed, save it back to newTask
JS:
app.controller('MainCtrl', function($scope) {
$scope.saveTask = function (event){
if (event.keyCode == 13){
$scope.newTask = $scope.tmpTask;
}
}
});
DEMO
html
<form ng-submit="createTask()">
<input type="text" ng-model="newTaskText" />
</form>
<div ng-repeat="task in tasks">{{ task.text }}</div>
controller
$scope.tasks = [];
$scope.createTask = function() {
$scope.tasks.push({
text: $scope.newTaskText
});
};
Since one of the other answers addresses the ng-keypress, I'll offer up the fact you don't need to use the ng-keypress event but can just watch the variable instead which negates the need for enter:
http://plnkr.co/edit/osFGRtpHG46bMyp15mc8?p=preview
app.controller('MainCtrl', function($scope) {
$scope.taskList = [];
$scope.$watch('newTask', function(newVal){
if (newVal=="newTask") {
$scope.taskList.push("Task " + $scope.taskList.length);
$scope.newTask = null;
}
});
});
<body ng-controller="MainCtrl">
<div class="add-task">
<input type="text" placeholder="Type then press enter to create task" ng-model="newTask" />
</div>
{{taskList.length}}
<div class="task-list" >
<a class="task" ng-repeat="task in taskList" ><span class="text">{{ task }} </span></a>
</div>
</body>
I'm trying to set up form validation using angular-ui. I want to check that the form is valid before submitting it, so I have set up a ng-submit event handler.
But before even implementing any validation, I noticed that the event handler gets called even when not submitting the form. In the example below, it gets invoked when I click the Add Item button:
<div ng-app="app">
<div ng-controller="ctrl">
<form name="myForm" ng-submit="sub()" novalidate>
<div ng-repeat="item in items">
<ng-form name="row">
<input type="text" name="value" ng-model="item.value" required />
</ng-form>
</div>
<button ng-click="addItem()">Add Item</button>
<input type="submit" value="Submit"/>
</form>
</div>
</div>
And JS:
var app = angular.module('app', ['ng']);
app.controller('ctrl', ['$scope', function($scope) {
$scope.items = [];
$scope.addItem = function() {
$scope.items.push({ value: $scope.items.length });
};
$scope.sub = function() {
alert("submitted?");
};
}]);
See my fiddle here:
http://jsfiddle.net/UvLBj/2/
Is this supposed to happen? Seems wrong to me that the ng-submit isn't just fired on form submit... Have I done something wrong?
Believe you need to add type="button" to avoid the accidental call to submit. Updated the fiddle and seems to fix it:
http://jsfiddle.net/UvLBj/3/
<button type="button" ng-click="doSomething()">Test</button>