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>
Related
I have the following Angular code
controller:
app.controller('MainCtrl', function($scope) {
var vm = this;
vm.job = null;
vm.create = function (job) {
vm.job = job;
}
});
HTML:
<div ng-controller="MainCtrl as vm">
<span data-ng-bind="vm.job.position"></span>
<form name="form" data-ng-submit="vm.create(vm.job)">
<label for="position">Position</label>
<input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
<button>Create</button>
</form>
</div>
But when I submit the form I don't see the Position value.
Any idea why?
Because
You forgot to add ng-app to the body or html element
You're using angular 1.0.8, which is completely obsolete, and doesn't support controller as.
Note that you don't even need to submit, since the job you're binding is already vm.job. Your create(vm.job) method call does nothing: it assigns vm.job to vm.job.
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
I do not know why when I click on Submit button $scope.result get the value (printed out by console.log) but it do not print out any thing by {{result}} in the template while {{countDown}} is still work ok. How to fix it?, thanks
SCRIPT:
angular.module('mean.system').controller('HeaderController', ['$scope', 'Global', $timeout', '$http', '$location', function ($scope, Global, $timeout, $http, $location) {
$scope.findFriend = function() {
$scope.result = "submit button is clicked";
console.log($scope.result); //submit button is clicked
}
$scope.countDown = 10;
var timer = setInterval(function(){
$scope.countDown--;
$scope.$apply();
}, 1000);
}]);
HTML:
<div data-ng-controller="HeaderController">
<div> {{countDown}} </div>
<form ng-submit="findFriend()">
<input type="email" ng-model="friendEmail">
<input type="submit" value="Find">
</form>
</div>
<section data-ng-controller="HeaderController">
<div> Confirm: {{result}} </div>
<div> {{countDown}} </div>
</section>
Here's your problem, other then the previous comment that you were using two controllers, but also, by having your outside of your initial that has the controller on it, then that's outside of the scope.
What you want to do is put the inside the . Here's how it should look along with a fiddle that shows this working for you.
<div ng-controller="MyCtrl">
<div>{{countDown}}</div>
<form ng-submit="findFriend()">
<input type="text" ng-model="friendEmail" />
<input type="submit" value="Find" />
</form>
<div>Confirm: {{result}}</div>
<div>{{countDown}}</div>
</div>
http://jsfiddle.net/HB7LU/1792/
And to be detail oriented, make sure to self close your tags, it's better formed HTML.
To be able to pass variables between different controllers, you can do it using a service as mentioned in the comment, this is a good simple example:
https://gist.github.com/exclsr/3595424
Cheers.
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