i have a login page which evaluates username and password using angularjs
but it seems that my conditional statement in the controller returns false even if i put a true value
here's my html file
<div class="row">
<form action="/">
<input type="text" class="form-control" id="username" ng-model="username" required>
<input type="Password" class="form-control" id="username" ng-model="password" required>
<br>
<button type="button" style="width: 40%;" ng-click="submit()"> Log In </button>
</form>
</div>
and my controller
var app = angular.module('myApp', ["ngRoute"]);
app.controller('ctrl',
function($scope, $location) {
$scope.submit = function() {
var username = $scope.username;
var password = $scope.password;
if($scope.username == 'admin' && $scope.password == 'admin') {
console.debug('success');
} else {
console.debug('fail');
}
}
});
every time i input 'admin' in username and password i always get 'fail' in my console which means the submit function returns false . .
1) Per the HTML spec you need to cannot have the same id on 2 different elements
html 4.1
2)You should explicitly declare the objects you want your control to have injected like below. That way when you minifiy your code, the Dependency injection will continue to work
app.controller('ctrl',['$scope','$location'
function($scope, $location) { }]);
3) TO answer your question why isnt this working. My plunkr works. I removed the routing, because it wasnt needed. Make sure you are typing in 'admin' no spaces/caps
<html>
<head>
<script src="angular.js"></script>
<script src="route.js"></script>
</head>
<body>
<div class="row" ng-app="myApp" ng-controller="ctrl">
<form action="/">
<input type="text" class="form-control" id="username" ng-model="username" required>
<input type="Password" class="form-control" id="username" ng-model="password" required>
<br>
<button type="button" style="width: 40%;" ng-click="submit()"> Log In </button>
</form>
</div>
<script>
var app = angular.module('myApp',["ngRoute"]);
app.controller('ctrl',
function($scope, $location) {
$scope.submit = function() {
var username = $scope.username;
var password = $scope.password;
if($scope.username == 'admin' && $scope.password == 'admin') {
console.debug('success');
} else {
console.debug('fail');
}
}
});
</script>
</body>
Related
I have form where I need validation on server side. Backend use one request to validate multiple fields.
I try to add validation message after response. Here is example:
This is my html code:
<div ng-app="MyApp">
<div ng-controller="MyController">
<form name="MyForm" novalidate ng-submit="send()">
<div>
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required>
<div ng-show="MyForm.email.$invalid">error message</div>
</div>
<input type="submit" ng-disabled="MyForm.$invalid">
<pre>{{ MyForm.email.$error | json }}</pre>
</form>
</div>
</div>
And my js code:
var myApp = angular.module('MyApp', []);
myApp.controller("MyController", ['$scope', '$timeout', '$log', function($scope, $timeout, $log) {
$scope.user = { "email" : "" }
$scope.send = function() {
$timeout(function() {
$log.log("Response from server. Multiple fields validation.");
$scope.MyForm["email"].$setValidity("server-side-error", false, $scope.MyForm)
// here I want to add something what listen once on $scope.MyForm["email"] changed
}, 1000);
};
}]);
But I need remove error when value changed. How to achieve it using Angular?
Here is example: https://jsfiddle.net/9wqhd89z/
You can call a check function whenever the user change the input using ng-change. So it will check if the email is currently invalid, and if it is it will set as valid again.
<input type="email" name="email" ng-model="user.email" ng-change="check()" required>
$scope.check = function(){
if ($scope.MyForm.email.$valid == false){
$scope.MyForm.email.$setValidity('server-side-error', true);
}
}
You can find a working version in this jsFiddle
Hi I am getting the following error:
Error : Cannot find module with name "my".
And also
Multiple annotations found at this line:-
Cannot find module with name my. Cannot find module with name my.
Cannot find controller with name mycontroller
Please help. Thanks But I am able to run the code perfectly though the error exists.
My code is as below:
<!DOCTYPE html>
<html ng-app="my">
<head>
<script src="angular.js"></script>
<script>
var validation = angular.module('my', []);
validation.controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
</head>
<body >
<div ng-controller="mycontroller">
<form name="form1">
<label>Name :</label> <input type="text" name="name" ng-model="firstName" required>
<span style="color: red" ng-show="form1.name.$error.required"> please provide the name</span>
<br>
<br>
<label>Email: </label> <input type="email"
name="email" ng-model="email">
<span style="color: red" ng-show="form1.email.$error.email"> please provide the valid email address </span>
<p style= "color: red" ng-show="form1.email.$error.email">please provide the valid email address</p>
<label>age :</label>
<input type="text" name="age" ng-model="age" ng-pattern="pattern">
<span style="color: red" ng-show="form1.age.$error.pattern"> please provide the correct age
</span>
</form>
</div>
</body>
</html> -->`
Try changing how your instantiating your controller. Try this:
<script>
var validation = angular.module('my', []);
angular.module('my').controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
Alternatively you could also instantiate it like this:
<script>
var validation = angular.module('my', []).controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
I have also added a JSFIDDLE that works both ways to show that they work
jsFiddle
I have a multiple for filed which have a same name in array formate like
<input type='text' name="frm[]">. I want to submit this in AngularJS and get value in PHP.
my script:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
Use Angular's $http service to post the data to your php file.
Check the below code
<html ng-app="submitExample">
<script type="text/javascript" src="lib\angular.js"></script>
<script type="text/javascript" src="index.js"></script>
<form ng-submit="submit()" ng-controller="FormController">
Enter text and hit enter:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
<input type="submit" id="submit" value="Submit" />
</form>
<html>
var app = angular.module('submitExample', [])
app.controller('FormController', ['$scope','$http', function($scope,$http) {
$scope.data = {};
$scope.data.textvalt = new Array();
$scope.data.textvalt[1] = '';
$scope.data.textvalt[2] = '';
$scope.data.textvalt[3] = '';
$scope.submit = function() {
var configObject = {
method: 'POST',
url: 'index.php',
data: { textval1: $scope.data.textvalt[1] , textval2 : $scope.data.textvalt[2], textval3 : $scope.data.textvalt[3] }
}
$http(configObject).then
(function successCallback(response) {
console.log("posted sucuessfully");
},
function errorCallback(response) {
console.log("Failed");
});
};
}]);
I am not able to get the $valid method working on the form. I need to get this working for the form validation, not sure where I am going wrong. Here is the angular code below where I am trying to write the output to the console.
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
console.log('is email valid? ' + myform.$valid)
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form name="myForm" novalidate ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<label>Email:</label>
<input type="email" ng-model="email"/>
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
</body>
Try like this
HTML
ng-submit="submit(myForm)"
JS
$scope.submit = function(form) {
console.log(form.$valid)
}
as in the title.. how to prevent such operations to happen? Here is a link to the official site, see the example. The variable user.name is bound to the first input userName and if the input is empty the object user.name is removed. How can I disable this functionality of angularjs?
Try ng-model-options="{allowInvalid: true}" to update the model even for invalid entries.
<input ng-model="user.name" required ng-model-options="{allowInvalid: true}">
You've got 2 option
remove required from input tag it allows you to send back empty string to your backend
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.params = {
user: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<input name="userName" ng-model="params.user" />
<hr/>
<pre>{{params| json}}</pre>
</div>
Option two validate your form before you send it to backend.
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.user = {
name: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="someForm">
<input name="userName" ng-model="user.name" required name="userName" />
<span ng-show="someForm.userName.$error.required">User Name required</span>
<br/>{{user | json}}
<br/>
<button type="submit" ng-disabled="someForm.$invalid">Submit</button>
</form>
</div>