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.
Related
I have a controller name say "CtrlABC", in which I have two forms namely, formA and formB. I want to access one $scoepe varialbe name $scope.var1's value in both the forms at the same time, I am able to access and change var1 value in first form but when trying to make change or access it in another form(which is below) then completely its not changing or accessing.
Here is my sample code.
angular.module("MyApp").controller("test", ['$scope',function ($scope) {
$scope.StartDate;
$scope.generateChart=function(SelectedProduct){
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<div ng-controller="test"><form name="A" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate> <md-input-container><label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container></form></div>
</div>
If I try to change the date from one to another the ng-modal variable is not updating itself.
It should work according to your code, here is a demo. Probably you can check for other parts,
Make sure you are using the angular-material version v1.1 and above
// Code goes here
var app = angular.module('app', ["ngMaterial"]);
app.controller('AppCtrl', function($scope) {
$scope.StartDate;
$scope.generateChart = function(SelectedProduct) {
//updated date should be here on click/submit of the form
console.log($scope.StartDate);
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-controller="AppCtrl">
<form name="A" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
<form name="B" ng-submit="generateChart(selectedProduct)" novalidate>
<md-input-container>
<label>From</label>
<md-datepicker required ng-model="StartDate"></md-datepicker>
</md-input-container>
</form>
</div>
</body>
</html>
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 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";
});
I want to reset the form before I click outside input. But before resetting data, an error message flashes. Any idea how to do it without flashes?
Plunker: http://plnkr.co/edit/hOBZ3vAjBhFNEzq1EReF?p=preview
HTML:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<form name="myForm" novalidate ng-controller="myCtrl">
<input type="text" name="field" ng-minlength="8" ng-model="field">
<span ng-if="myForm.field.$invalid && myForm.field.$touched" style="color: red">Error</span>
<br>
Reset
</form>
</body>
</html>
Javascript:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.reset = function(){
$scope.field = "";
}
});
You should use ng-model-options for this special case where you can update actual ng-model value after particular set of interval
<input type="text" name="field" ng-minlength="8" ng-model="field"
ng-model-options="{ debounce: { 'default': 500, 'blur': 200 } }"/>
Working Plunkr