I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.
Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});
just do following changes
$scope.Click = function()
{
//your logic
}
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)"
<%#page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is social network site" />
<meta name="keywords" content="Social Network, Social Media, Make Friends, Newsfeed, Profile Page" />
<meta name="robots" content="index, follow" />
<title>Rafiki</title>
<!-- Stylesheets
================================================= -->
<link href="<c:url value='/static/css/bootstrap.min.css' />" rel="stylesheet"/>
<link href="<c:url value='/static/css/style.css' />" rel="stylesheet"/>
<link href="<c:url value='/static/css/ionicons.min.css' />" rel="stylesheet" />
<link href="<c:url value='/static/css/font-awesome.min.css' />" rel="stylesheet"/>
<!--Google Webfont-->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700' rel='stylesheet' type='text/css'/>
<!--Favicon-->
<link rel="shortcut icon" type="image/png" href="<c:url value='/static/images/favicon.png' />" />
</head>
<body ng-app="myApp" ng-controller="UserController as ctrl" ng-init="ctrl.init()">
<!-- Header
================================================= -->
<header id="header">
<nav class="navbar navbar-default navbar-fixed-top menu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="rafiki" href="<c:url value='FriendBinder' />" >RAFIKI</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav navbar-right main-menu" ng-controller="UserController as ctrl">
<form class="form-inline">
<fieldset class="form-group">
<label class="sr-only" for="email">Email Address</label>
<input type="email" class="form-control input-sm" id="example-email" placeholder="Email">
</fieldset>
<fieldset class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control input-sm" id="example-password" placeholder="Password">
</fieldset>
<fieldset class="checkbox-inline">
<label>
<input type="checkbox">Remember me
</label>
</fieldset>
<button type="submit" class="btn-primary">Login In
</button>
</form>
<button type="submit" ng-click="ctrl.showRegister()" class="btn-primary">Register</button>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
<!--Header End-->
<!-- Top Banner
================================================= -->
<section id="banner">
<div class="container" >
<!-- Sign Up Form
================================================= -->
<div class="sign-up-form" ng-show="ctrl.isShowRegister" >
<h2 class="text-white">Find My Friends</h2>
<div class="line-divider"></div>
<div class="form-wrapper">
<p class="signup-text">Signup now and meet awesome people around the world</p>
<form ng-submit="ctrl.submit()" name="myForm">
<fieldset class="form-group">
<input type="text"
class="form-control" id="example-name" placeholder="Enter name" ng-model="ctrl.user.name" name="name"
required ng-minlength="3">
<div class="has-error" ng-show="myForm.$dirty">
<span ng-show="myForm.name.$error.required">This is arequired field</span>
<span ng-show="myForm.name.$error.minlength">Minimum length required is 3</span> <span ng-show="myForm.name.$invalid">This field is invalid </span>
</div>
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" id="example-email" placeholder="Enter email" ng-model="ctrl.user.email" name="email"
required>
<div class="has-error" ng-show="myForm.$dirty">
<span ng-show="myForm.email.$error.required">This is arequired field</span>
<span ng-show="myForm.email.$invalid">This field is invalid </span>
</div>
</fieldset>
<fieldset class="form-group">
<input type="password" class="form-control" id="example-password" placeholder="Enter a password" ng-model="ctrl.user.password" name="password" required>
<div class="has-error" ng-show="myForm.$dirty"> </div>
</fieldset>
<p>By signning up you agree to the terms</p>
<button type="submit" class="btn-secondary" ng-disabled="myForm.$invalid">Create Account </button>
</form>
</div>
</div><!-- Sign Up Form End -->
</div>
</section>
<!-- Footer
================================================= -->
<footer id="footer">
<div class="copyright">
<p>Copyright #Rafiki 2017. All rights reserved</p>
</div>
</footer>
<!--preloader-->
<div id="spinner-wrapper">
<div class="spinner">
</div>
</div>
<!-- Scripts
================================================= -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="<c:url value='/static/js/app.js' />"></script>
<script src="<c:url value='/static/js/controller/user_controller.js' />"></script>
<script src="<c:url value='/static/js/service/user_service.js' />"></script>
<script src="<c:url value='/static/js/jquery.incremental-counter.js' />"></script>
<script src="<c:url value='/static/js/jquery-3.1.1.min.js' />"></script>
<script src="<c:url value='/static/js/jquery.appear.min.js' />"></script>
<script src="<c:url value='/static/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/static/js/script.js' />"></script>
</body>
</html>**strong text**
//isShowRegister is getting true but signup form is not viewing.
'use strict';
angular.module('myApp').controller('UserController', ['$scope', 'UserService', function($scope, UserService) {
var self = this;
self.user={id:null,name:'',email:'',password:''};
self.users=[];
self.init=init;
var message=message;
var isShowRegister=isShowRegister;
self.submit = submit;
self.reset = reset;
self.showRegister=showRegister;
function init() {
debugger;
self.isShowRegister=false;
}
function showRegister(){
debugger;
self.isShowRegister=true;
}
function createUser(user){
UserService.createUser(user)
.then( function (d){
self.message=d},
function(errResponse){
console.error('Error while creating User');
}
);
}
function submit() {
if(self.user.id===null){
console.log('Saving New User', self.user);
createUser(self.user);
}else{
updateUser(self.user, self.user.id);
console.log('User updated with id ', self.user.id);
}
reset();
}
function reset(){
self.user={id:null,username:'',address:'',email:''};
$scope.myForm.$setPristine(); //reset Form
}
}]);
please check this, there might be some initialization problem as showRegister function is called on clicking and isShowRegister value is also getting true but signup form is not showing.
You probably meant to do this:
var self = this;
self.user={id:null,name:'',email:'',password:''};
self.users=[];
self.init=init;
var message=message;
self.isShowRegister = false; //<------------
self.submit = submit;
self.reset = reset;
self.showRegister=showRegister;
I am new to AngularJs. I am just getting confused why does my code when the value for ng-app is just empty string the Angular directives are working but on the other hand the directives are not working if the its value is not empty string.
What is happening here? My code is below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1"; charset=ISO-8859-1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body **ng-app="loginApp"** class="body-bg-blue">
<div class="container">
<div class="row"></div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="jumbotron vertical-center">
<div class="login-form">
<div class="page-header">
<h1>STWEBAPP</h1>
</div>
<div **ng-controller="loginController"**>
<form name="loginForm" ng-submit="login()" role="form">
<div class="form-group">
<input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
<span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group">
<input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
<img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="row"></div>
</div>
</body>
</html>
I assume you are talking about ng-app directive, if you declare ng-app int he application with a name , you need the module to be declared.
var app = angular.module("loginApp", []);
app.controller("loginController", ["$scope",
function($scope) {
}
]);
DEMO
var app = angular.module("loginApp", []);
app.controller("loginController", ["$scope",
function($scope) {
}
]);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/loginPage.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title>Login</title>
</head>
<body ng-app="loginApp" class="body-bg-blue">
<div class="container">
<div class="row"></div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="jumbotron vertical-center">
<div class="login-form">
<div class="page-header">
<h1>STWEBAPP</h1>
</div>
<div ng-controller="loginController">
<form name="loginForm" ng-submit="login()" role="form">
<div class="form-group">
<input type="text" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" required />
<span ng-show="loginForm.username.$dirty && loginForm.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group">
<input type="password" name="password" id="password" ng-model="password" class="form-control" placeholder="Password" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn-danger">Login</button>
<img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="row"></div>
</div>
</body>
</html>
I am new to AngularJS. I am creating single page application in which a form consists of multiple steps. I have used buttons and input fields. Form is getting submitted. I want to fetch the form fields values but i don't know the ways to do it. I have added my code. I want to see what user is filling so i can store the values in database. How do i get my values in console log.? Please someone guide me how to do it.
// Code goes here
var app = angular.module("MyApp", ["ngAnimate"]);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
console.log(myform);
}
};
$scope.sliderValue = null;
$scope.name = '';
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
});
.circle
{
width:125px;
height:125px;
border:2px solid #FFF;
border-radius:62.5px;
font-size:18px;
color:#fff;
line-height:125px;
text-align:center;
background:#67508F
}
<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body ng-controller="MyCtrl">
<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">
<div ng-show="step==1">
<h3>Which step</h3>
<div ng-form='step1form'>
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 4">Go to step 4</button>
<button type="submit" class="OptionButton zoomIn" ng-disabled="!step1form.$valid" ng-click="step = 2">Go to step 2</button>
</div>
</div>
<div ng-show="step==2">
<h3 class="zoomIn">which step</h3>
<div ng-form='step2form'>
<div class="circle zoomIn" ng-disabled="!step2form.$valid" ng-click="step = 4"><span>Go to step 3</span></div>
</div>
</div>
<div ng-show="step==4">
<h3 class="zoomIn">Personal Details</h3>
<div ng-form='step14form'>
<input ng-model="FirstName" name="FirstName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="First Name" required>
<p class="ErrorMessage" ng-show="step4form.FirstName.$error.pattern">Please enter a valid First name.</p>
<input ng-model="LastName" name="LastName" type="text" ng-pattern="/^[a-zA-Z]*$/" class="zoomIn" placeholder="Last Name" required>
<p class="ErrorMessage" ng-show="step4form.LastName.$error.pattern">Please enter a valid Last name.</p>
<input ng-model="Phone" name="Phone" type="text" ng-pattern ="/^[789]\d{9}$/" class="zoomIn" placeholder="Phone" required>
<p class="ErrorMessage" ng-show="step4form.Phone.$error.pattern">Please enter a valid phone number.</p>
<input ng-model="Email" name="Email" type="text" ng-pattern ="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" class="zoomIn" placeholder="Email" required>
<p class="ErrorMessage" ng-show="step4form.Email.$error.pattern">Please enter a valid email address.</p>
</div>
<button type="submit" id="submit" class="Submit" ng-disabled="!myform.$valid" ng-click="submit()">Submit</button>
</div>
</form>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script src="script.js"></script>
</body>
</html>
My suggestion is to use data object for all of your ng-model inputs.
this is my JSFiddle example: JSFiddle
HTML:
<div ng-app>
<form ng-controller="FormController" name="myForm">
<div class="header padding-b--10">Form Area</div>
<div class="padding-b--10">
<input name="empId" placeholder="Employee ID" ng-model="data.empId"
style="padding:5px" required/>
<span ng-if="myForm.empId.$dirty && myForm.empId.$invalid" ng-bind="invalid" class="error"></span>
</div>
<div class="padding-b--10">
<input name="empEmail" type="email" placeholder="Email" ng-model="data.empEmail"
style="padding:5px" required/>
<span ng-if="myForm.empEmail.$dirty && myForm.empEmail.$invalid" ng-bind="invalid" class="error"></span>
</div>
<input type="button" value="Submit" ng-click="submit()" class="button" ng-disabled="myForm.$invalid">
<pre>{{data}}</pre>
<pre>myForm.empId.$valid = {{myForm.empId.$valid}}</pre>
<pre>myForm.empEmail.$valid = {{myForm.empEmail.$valid}}</pre>
</form>
</div>
JS:
function FormController($scope){
$scope.invalid = "Invalid";
$scope.submit = function(){
console.log($scope.data);
}
};
What does this:
ng-disabled="login == ''"
not disable the button when the input field login is empty?
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body ng-controller="mainController">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
LOGIN
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" ng-model="login">
</div>
<div class="form-group">
<label for="inputPassword">Passowrd</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" ng-disabled="login == ''" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', function ($scope) {
});
</script>
</body>
</html>
Create a form object in your controller which would hold each model property/field, and then check if the field (login) equates and empty string.
...
<input type="text" class="form-control" id="login" ng-model="form.login">
...
<button type="submit" ng-disabled="form.login === ''" class="btn btn-primary">Login</button>
....
Controller
mainApp.controller('mainController', function ($scope) {
$scope.form = {
login: ''
}
});
JSFIDDLE