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.
Related
I would like to save my datas from my form to my service function setData(), but I am not sure how to do it. I have already done the service, the setData() function, and my form.
Form
<form id="eventForm" data-toggle="validator" class="text-left" role="form" name="form.eventForm">
<div class="form-group col-md-12">
<input type="text" ng-model="form.return" name="RT" id="return"> Return
<input type="text" ng-model="form.oneway" name="OW" id="oneway"> One way
</div>
<button name="submit" class="btn btn-default ng-click="form.$valid && submit()">Pay now</button>
</form>
AngularJS submit method
$scope.submit = function() {
FormData.setData($scope.form);
$location.path("/flights");
}
Service setData()
this.data = JSON.parse(sessionStorage.getItem("flights") || '{}');
this.setData = function(data) {
this.data = data;
sessionStorage.setItem("flights", JSON.stringify(data));
}
this.getData = function() {
return this.data;
}
I don't know how should I pass my whole data from my Form to setData() function.
Try changing the submit button to disable on an invalid form, and set the submit action to send the form object. Then, in the controller, set the function to accept an argument (the form data), and use that.
HTML
<form id="eventForm" data-toggle="validator" class="text-left" role="form" name="form.eventForm">
<div class="form-group col-md-12">
<input type="text" ng-model="form.return" name="RT" id="return"> Return
<input type="text" ng-model="form.oneway" name="OW" id="oneway"> One way
</div>
<button name="submit"
class="btn btn-default
ng-disabled="form.$invalid"
ng-click="submit(form)">
Pay no
</button>
</form>
JS
$scope.submit = function(submitData) {
FormData.setData(submitData);
$location.path("/flights");
}
I got this form:
<form ng-controller="SomeCtrl as some" name="product[[product.id]]" ng-submit="some.addToCart(something, product[[product.id]].$valid)" novalidate></form>
Then html looks like:
<form ng-controller="SomeCtrl as some" name="product1" ng-submit="some.addToCart(something, product1.$valid)" novalidate=""></form>
Controller:
this.addToCart = function(something, isValid) {
console.log(isValid);
}
isValid is always undefined. How to detect if form is valid in controller?
Demo
You don't want to use ng-submit if you want to do your own validation in the controller because it will block the submission of the form if it is invalid.
Just use a regular button with a function in ng-click that checks the condition of the form.
Controller:
$scope.submit = function() {
console.log($scope.myForm.$valid)
}
HTML
<form name="myForm">
<input ng-model="myForm.text" type="text" required />
<button ng-click="submit()">Submit</button>
</form>
I have a form like this -
<form name="myForm" novalidate>
There are some fields in the form which I am validating and then submitting the form like this -
<input type="button" ng-click="Save(data)" value="Save">
In the controller, I want to check if the form is not valid then Save() should show some error on the page. For that, I am setting up a watch like this -
$scope.$watch('myForm.$valid', function(validity) {
if(validity == false)
// show errors
});
But I am always getting this error on running it -
Cannot read property '$valid' of undefined
Can someone explain why?
Thanks
You just misspelled "myForm" in your controller code. In order to remove the error, Write "myform" instead of "myForm".
However I expect what you want is like this.
$scope.Save = function(data){
alert($scope.myform.$valid);
}
I setup jsfiddle.
In my case I was wrapping the form in a modal created in the controller and therefore got the same error. I fixed it with:
HTML
<form name="form.editAddress" ng-submit="save()">
<div class="form-group">
<label for="street">Street</label>
<input name="street" type="text" class="form-control" id="street" placeholder="Street..." ng-model="Address.Street" required ng-minlength="2" />
<div class="error" ng-show="form.editAddress.street.$invalid">
<!-- errors... -->
</div>
</div>
<button type="submit" class="btn btn-primary" >Save address</button>
</form>
JS
angular.module("app").controller("addressController", function ($scope, $uibModal, service) {
$scope.Address = {};
$scope.form = {};
$scope.save = function() {
if (modalInstance !== null) {
if (isValidForm()) {
modalInstance.close($scope.Address);
}
}
};
var isValidForm = function () {
return $scope.form.editAddress.$valid;
}
});
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>
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