<html>
<head>
<title>Javascript Login Form Validation</title>
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script>
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
</script>
</head>
<body>
<div class="container">
<div class="main" ng-app ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div></div></body></html>
this is my above code and i am unable to call the ctrlClickHandler method . i dont knwo where i am wrong. could any one please help to me on it.
Thanks in advance!.
you need to define the angular.module inorder to work with angular
var globalClickHandler=function globalClickHandler(){
alert("Inside global click handler ");
}
angular.module("app",[])
.controller("ctrl", MyCtrl)
function MyCtrl($scope){
$scope.myval = 5;
$scope.ctrlClickHandler = function(){
alert("Inside controller: value of myval is " + $scope.myval);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main" ng-app="app" ng-controller="MyCtrl">
<form id="form_id" method="get" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<button type="button" ng-click="ctrlClickHandler()">Login</button>
</form></div>
Related
I am using Angularjs 1 in my project.i am validating the form inside angular,so i am using form.$valid to check the form submitted is valid or not,but it is not working properly,not sure what i am missing
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp",[]);
angular.module("myApp").controller("SampleController",[function(){
this.user = {}
this.submitForm = function(form){
if(form.$valid){
window.alert("Valid")
}else{
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div> <!--/ container -->
</body>
</html>
I am always getting the alert message from the else part which states form invalid
Form directive is bounded to scope, so you need to write it as $scope.sampleForm.$valid. Since your name is dynamic, you can use a bracket notation: $scope[form].$valid. But either way you need to inject $scope into your controller.
Here is a demo:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title> Learning AngularJS Filters </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script>
"use strict";
angular.module("myApp", []);
angular.module("myApp").controller("SampleController", ['$scope', function($scope) {
this.user = {}
this.submitForm = function(form) {
if ($scope[form].$valid) {
window.alert("Valid")
} else {
window.alert("In Valid");
}
}
}]);
</script>
</head>
<body>
<div ng-controller="SampleController as sm" class="container">
<form name="sampleForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1"> Username </label>
<input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
</div>
<button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
<p> {{ sm.user }} </p>
</form>
</div>
<!--/ container -->
</body>
</html>
You are passing form as a string in ng-click method not a form Object.So u have to pass the form object without Single-cotts.
ng-click="sm.submitForm('sampleForm')" to ng-click="sm.submitForm(sampleForm)"
In my project I am facing an issue that ng-if is not working. I want to remove/add text field when value of $scope.edit changes.
I have created a simplest of example in the jsfiddle below.
HTML
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
JS
function TodoCtrl($scope) {
$scope.name = "Johny";
}
http://jsfiddle.net/U3pVM/32009/
Your Fiddle may not work because you are using Angular 1.0.1 which has some issue in ng-if.
Solution 1
If you are really using this version, you can replace ng-if by ng-show (which will create hidden elements in the DOM).
<div ng-show="edit">
Demo on JSFiddle using ng-show
Solution 2
Anyway, the best solution would be to use Angular 1.2+ which fixes ng-if bugs in ng-repeat. As you can see in the following snippet, I didn't change your code, and it works.
Demo on JSFiddle using ng-if
Some observations :
Seems that your angular version is old. hence, ng-if is not working.
If you want to use only existing angular version then you can use ng-show instead of ng-if.
Demo with ng-if :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-if="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Demo with ng-show :
function TodoCtrl($scope) {
$scope.name = "Johny";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show="edit">
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</div>
</div>
Use ng-show instead
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
DEMO
Update the angular version with 1.2 or above with ng-if
angular.module('myApp', [])
.controller('TestCtrl', function($scope) {
$scope.name = "Johny";
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS </title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<input type="checkbox" ng-model="edit" ng-init="edit = true">
<div ng-bind="edit"></div>
<div ng-show=edit>
<input type="text" ng-model="name" size="30" placeholder="New Name" />
</div>
</body>
</html>
I'm new to Angular and Ionic and I have problem with getting value of input. I get "undefined". Here is my code:
.controller('myCtrl', function($scope) {
$scope.submit = function () {
console.log($scope.name);
}
}
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
try this
<form>
<input type="text" ng-model="name">
<button ng-click="submit()" class="button">Send</button>
</form>
Try this code
<form ng-submit="submit()">
<input type="text" ng-model="FinalData.name" name="name">
<button class="button">Send</button>
</form>
And then in controller
$scope.FinalData={};
$scope.FinalData.name ="dasda";
$scope.submit = function(){
console.log($scope.FinalData.name);
}
Check with this example
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.name = 'Hello World!';
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myCtrl'>
<form ng-submit="submit()">
<input type="text" ng-model="name">
<button class="button">Send</button>
</form>
</div>
</body>
</html>
The input fields should NOT directly update the fields (meaning when I type in the input box you should NOT see the badge field update - only after the Submit button is pressed will the fields populate).
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName}} {{lName}}</h3>
<h3>Place of Birth: {{birth}}</h3>
<h3>Email: {{email}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone}}</h3>
<h3>Favorite Food: {{food}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName = fName;
$scope.email = '';
$scope.phone = '';
$scope.lName = '';
$scope.birth = '';
$scope.food = '';
$scope.about = '';
}
}])
Can someone look at my code and help me see what's wrong.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName1}} {{lName1}}</h3>
<h3>Place of Birth: {{birth1}}</h3>
<h3>Email: {{email1}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone1}}</h3>
<h3>Favorite Food: {{food1}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
js file is
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName1 = $scope.fName1;
$scope.email1 = $scope.email;
$scope.phone1 = $scope.phone;
$scope.lName1 = $scope.lName;
$scope.birth1 = $scope.birth;
$scope.food1 = $scope.food;
$scope.about1 = $scope.about;
}
}])
I'm having some problems trying to keep my parent ngForm status updated; it should be set to "Pristine" when all its children are cleaned and set to "Pristine" them selves... but it seems not happen automatically.
I created a plunk here to better explain the problem: http://plnkr.co/edit/vCX7ltOb8fgl3fkEpvzy?p=preview
<body ng-controller="MainCtrl">
<div ng-form="parentForm1" class="parent-form">
parentForm1.dirty: <b>{{parentForm1.$dirty}}</b>
<form name="childForm1" class="child-form" novalidate>
childForm1.dirty: <b>{{childForm1.$dirty}}</b>
<br/>
<input type="text" ng-model="field1">
<br/>
<button ng-click="reset1()">Clean and setPristine</button>
</form>
<form name="childForm2" class="child-form" novalidate>
childForm2.dirty: <b>{{childForm2.$dirty}}</b>
<br/>
<input type="text" ng-model="field2">
<br/>
<button ng-click="reset2()">Clean and setPristine</button>
</form>
</div>
</body>
Where am I wrong? I found solutions using external modules... I'd like to solve it with less code as possible (perhaps a directive?).
I found my own answer with "angular-input-modified" here is the updated plunk: http://plnkr.co/edit/vCX7ltOb8fgl3fkEpvzy?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//rawgit.com/betsol/angular-input-modified/master/dist/angular-input-modified.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainCtrl">
<div ng-form="parentForm1" class="parent-form">
parentForm1.dirty: <b>{{parentForm1.$dirty}}</b>
<br/>
parentForm1.modified: <b>{{parentForm1.modified}}</b>
<form name="childForm1" class="child-form" novalidate>
childForm1.dirty: <b>{{childForm1.$dirty}}</b>
<br/>
<input type="text" ng-model="field1">
<br/>
<button ng-click="reset1()">Clean and setPristine</button>
</form>
<form name="childForm2" class="child-form" novalidate>
childForm2.dirty: <b>{{childForm2.$dirty}}</b>
<br/>
<input type="text" ng-model="field2">
<br/>
<button ng-click="reset2()">Clean and setPristine</button>
</form>
</div>
<form name="exChildForm1" class="child-form" novalidate>
exChildForm1.dirty: <b>{{exChildForm1.$dirty}}</b>
<br/>
<input type="text" ng-model="exfield1">
<br/>
<button ng-click="exreset1()">Clean and setPristine</button>
</form>
</body>
</html>
JS:
var app = angular.module('test', ['ngInputModified']);
app.controller('MainCtrl', function($scope) {
$scope.reset1 = function() {
$scope.field1 = null;
$scope.childForm1.$setPristine();
}
$scope.reset2 = function() {
$scope.field2 = null;
$scope.childForm2.$setPristine();
}
$scope.exreset1 = function() {
$scope.exfield1 = null;
$scope.exChildForm1.$setPristine();
}
});