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";
});
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.
I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.
When I click submit button, the form gets submitted instead of validating for the required fields.
Markup
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta charset="UTF-8">
<title>HTML 5</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div id="container">
<p ng-show="msg"> {{ msg }}</p>
<form name="myForm" novalidate ng-submit="valid()">
<p> Name <input type="text" name="name" id="" ng-model="user.name" ng-required=true></p>
<p ng-show="myForm.name.$invalid && myForm.name.$touched">name is required</p>
<p> Email <input type="email" name="email" id="" ng-model="user.email" ng-required=true> </p>
<p ng-show="myForm.email.$invalid && myForm.email.$touched">must be a valid email</p>
<input type="submit" value="submit">
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.valid = function() {
$scope.msg = "form submitted";
}
}]);
</script>
</body>
</html>
Any help would appreciated. Thanks
Shortest way to call function if form is validate is dictated below, which will fired up valid function only when form is valid.
ng-submit="myForm.$valid && valid()"
Or other way would be check myForm object in $scope, because when you give name="myForm" on form, angular does create a object inside scope that have all the information field information inside that object.
$scope.valid = function(){
if($scope.myForm.$valid){
//form is valid
//do $http.post call if you wanted to submit form data
}
else {
alert('form is invalid');//some how notify user that form is invalid.
}
}
You can just disable the submit button using:
ng-disabled="boolean expression"
in your case it will be simply:
<input type="submit" value="submit" ng-disabled="!myForm.$valid">
Try to put:
$scope.valid=function() {
if ($scope.myForm.isValid()) $scope.msg="form submitted";
else $scope.msg="form with errors";
}
hope it helps
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
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");
}
});