I have an HTML page that looks like this:
<div ng-controller="MyController">
<form action="/my-url" method="POST">
...
</form>
</div>
This page is an ANgularJS app. Inside of it, I then have the following:
<script type="text/javascript">
myApp.controller('MyController', ['$scope', function($scope) {
$scope.submitForm = function() {
// how?
}
}]);
</script>
How do I submit the form from the submitForm function? In other words, I am trying to programmatically submit the form. How do I do that?
Thank you!
use this:
<div ng-controller="MyController">
<form ng-submit="submitForm()">
...
<button type="submit">submit here</button>
</form>
</div>
see in detail
Related
I am new to AngularJS and try to implement form validation in "myApp" app.
I wrote the code below. The {{result}} should output "true"/"false". But it didn't work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name = "myForm">
<p>Input the field: </p>
<input type = "text" name="myInput" ng-model = "myInput" required>
</form>
<p> The result:</p>
<p>{{result}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = myForm.myInput.$valid;
});
</script>
</body>
This must be correct code for your problem.
If you "watch" the changes in the "input field" then $valid result will generate.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<form name='myForm' novalidate>
<p>Input the field: </p>
<input type='text' ng-model='model.name' name='myInput' required/>
</form>
<p> The result:</p>
<p>{{myForm.myInput.$valid}}</p>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',['$scope',function($scope) {
$scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
if(newValue) {
//do anything with new value
}
});
}]);
</script>
</body>
</html>
Hope this will be helpful to you.
As a new User to angularJS your approcach is some how correct in form validation.In future you will learn new vesions in angular and several validation methodologies.
following code line is the way that how we can check valid input in angularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Your approach is correct.Keep it up and it will be great if you can define correct question clearly. :)
Cheers.
<div ng-controller="ctrl1">
<form name="form1" ng-submit="submitForm()">
<input type="text" name="email" />
</form>
</div>
<div ng-controller="ctrl2">
<button> Submit </button>
</div>
Here from ctrl2, I want to trigger form submit action for a form which is in ctrl1
How to achieve this in angularJs?
You could emit an event on the button click and then use rootscope to broadcast it down - ctrl1 could then listen for this an submit the form in response.
You can achieve using $rootScope or services or event brodcasting
app.controller('ctrl2',['$scope','$rootScope',function($scope,$rootScope) {
$scope.submitForm = $rootScope.mainSubmit();
}]);
app.run(function($rootScope){
$rootScope.mainSubmit =function(){
console.log("hey");
};
})
You can emit an event from the second controller and listen to it in the first controller.
function CtrlOne($rootScope)
{
$rootScope.$on('submitEvent', function(event, args) {
//submit your form here
});
}
function CtrlTwo($scope,$rootScope)
{
$scope.submit=function(){
$rootScope.$emit('submitEvent', args);
}
}
<div ng-controller="CtrlOne">
<form name="form1" ng-submit="submitForm()">
<input type="text" name="email" />
</form>
</div>
<div ng-controller="CtrlTwo">
<button ng-click="submit()"> Submit </button>
</div>
I have simple form. I need to show errors about my fields.
<html lang="en" ng-app="MyApp">
<head></head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And this is my controller
angular.module('MyApp',[])
.controller('AppCtrl', function() {
var form = document.getElementById("myForm");
var error = {
myField: 'Error in this field'
};
for (var key in error) {
form[key].$error = error[key];
}
});
Why I can't see error about myField? I get only '{}'
You're not binding the form to AngularJS correctly
<form name="myForm" id="myForm">
This says your form is called myForm, so in your controller you should be using $scope.myForm
No need for var form = document.getElementById("myForm");, just use $scope.myForm in your controller
Try this to see if you access the the form from AngularJS
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Ok, so I'm pretty sure I'm missing something obvious, but I'm not seeing it.
I created a fiddle that I would have thought would throw an alert message when the input box loses focus, but it's not working and I don't know why.
I was expecting an alert message when the user performs the following steps:
click the input box
type something
click somewhere outside of the input box
but these steps do not show an alert message.
Surely, someone knows what I'm doing wrong...?
Here's the code (same as the fiddle):
<div ng-app>
<div ng-controller="MyCtrl">
<form name="myForm">
<input type="text" ng-model="todoText" size="30"
name="myInput" ng-blur="validate(myForm)">
</form>
</div>
</div>
function MyCtrl($scope) {
$scope.validate = function(form) {
alert('blur!');
};
}
It could be your version of angular. Your fiddle is using 1.0.x I updated you to 1.4.x and its working fine:
<div ng-app='myApp'>
<div ng-controller="MyCtrl">
{{santity}}
<form name="myForm">
<input type="text" ng-model="todoText" size="30"
name="myInput" ng-blur="validate(myForm)">
</form>
</div>
</div>
Javascript
angular.module('myApp', []);
angular.module('myApp').controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.santity = 'Hello';
$scope.validate = function(form) {
alert('blur!');
};
}
http://jsfiddle.net/ncapito/LurjLvz7/6/
We are using angular to do like/unlike behavior for our app.
Code for html
<html>
<body ng-app="myApp">
<div ng-controller="newsCntrl" >
<form ng-submit="post()" name="postForm" id="postForm" >
<input type="submit" id="submit" value="Submit"/>
</form>
Like</span>
</div>
</body>
</html>
Code for controller
myApp.controller("newsFeedCtrl", function ($scope, $http) {
console.log("inside newsFeedCtrl");
$scope.post() = function() {
console.log("posting");
}
$scope.likePost = function(postId) {
console.log("liking post");
}
});
The problem is when we click on like; it also calls post function which should not be happening.
Are we missing anything here?
There is a mismatch between the controller name in the HTML:
<div ng-controller="newsCntrl" >
and the controller in the JS:
myApp.controller("newsFeedCtrl", function ($scope, $http)
If I fix it, it seems to work.
Check this fiddle
You should remove syntax error
Code for html:
<html>
<body ng-app="myApp">
<div ng-controller="newsCntrl">
<form ng-submit="submitPost()" name="postForm" id="postForm">
<input type="submit" id="submit" value="Submit"/>
</form>
Like
</div>
</body>
</html>
Code for controller:
myApp.controller("newsFeedCtrl", function ($scope, $http) {
console.log("inside newsFeedCtrl");
$scope.submitPost = function() {
console.log("posting");
}
$scope.likePost = function(postId) {
console.log("liking post");
}
});