I need to make the textbox border color as red when validation get fail.Here I am using angulerjs validation I am not able to understand how to make the textbox color as red.
Thanks in advance.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<form name="preSourceThresholdForm">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
Update
Please check this below code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: test.preSourceThreshold.$invalid}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
You can use ng-class directive to apply a CSS class if the given condition evaluates to true:
.red {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="test">
<input type="number" ng-model="MyNumber" name="MyNumber" ng-class="{red: test.MyNumber.$invalid}" />
</form>
<div>
UPDATE
Here is the working code for your example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be greater Then 0</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty">This field is required</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
** UPDATE II **
I have added a check for $dirty to ensure that the validation only checks on updated inputs
You can add a css:
input.ng-invalid {
border-color: red;
}
Because angularjs will add class ng-invalid to input when validation failed.
You can read document here: https://docs.angularjs.org/guide/forms#using-css-classes
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="form-group">
<div ng-class="{'has-error': preSourceThresholdForm.preSourceThreshold.$invalid && (preSourceThresholdForm.preSourceThreshold.$dirty )}">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" class="form-control" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
</div>
</form>
Try this.
Related
I am writing an app with Angular 1.5. I have a form with a time input.
<div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">
<span class="input-label" ng-i18next="TIME"></span>
<input name="time" type="time" max="{{ accvm.data.maxTime | date:'HH:mm' }}" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />
</div>
<div ng-messages="accvm.addForm.time.$error">
<div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>
<div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>
</div>
For some reason, the ng-change function is only called once when the page loads and never again even if I type a new value in. I am not sure what I am doing wrong.
Here is my JSFiddle: http://jsfiddle.net/aubz88/j25jwtL2/
ng-change is not firing method due to invalidation. Check this working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-date-input-directive-production</title>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
</head>
<body ng-app="dateInputExample">
<script>
angular.module('dateInputExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.changed = 0;
$scope.example = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
$scope.change = function(){
$scope.changed ++;
}
}])
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Picktime:</label>
<input type="time" time id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" required="" ng-change="change();" />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.time">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "HH:mm"}}</tt>
<br />
<div>The time has been changed
<ng-pluralize count="changed" when="{'0': '{} times.',
'one': '1 time.',
'other': '{} times.'}"></ng-pluralize>
</div>
</form>
<!--<form name="myForm" ng-controller="DateController as accvm">-->
<!-- <div class="item item-input" ng-class="{ 'has-error' : accvm.addForm.time.$invalid }">-->
<!-- <span class="input-label" ng-i18next="TIME"></span>-->
<!-- <input name="time" type="time" ng-model="accvm.data.time" ng-change="accvm.timeChange()" style="text-align: right" required />-->
<!-- </div>-->
<!-- <div ng-messages="accvm.addForm.time.$error">-->
<!-- <div class="form-error" ng-message="required"><span ng-i18next="VALIDATION_PROJECT"></span></div>-->
<!-- <div class="form-error" ng-message="max"><span ng-i18next="VALIDATION_TIME_FUTURE"></span></div>-->
<!-- </div>-->
<!-- {{changed}} {{accvm.addForm.time.$invalid}}-->
<!--</form>-->
I think the problem is with the different abbreviation that you are using in your controller and in your template, changing accvm for vm it's working fine for me.
Here's your JSFiddle updated: http://jsfiddle.net/j25jwtL2/58/
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 need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
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);
}
};
I am writing a HTML page using Bootstrap and AngularJS to capture details of an order, and when the page has finished loading it jumps up so that the header of the panel is hidden under the bootstrap navbar.
This isn't what I was expecting. See this plunkr for an example of what I want to achieve. It shows the panel header and the focus is on the Order Ref field as expected and the page doesn't move up at all.
I have tried to create a plunkr that uses AngularJS to demonstrate the issue, but I couldn't get it to run properly so I decided to show the same plunked code in the hope that someone has come across this before.
<!-- Orders.html -->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Portal</title>
</head>
<body>
<header class="bs">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#">Portal</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<div class="navbar-text">Search</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<form name="form" class="form-horizontal" confirm-on-exit>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Order
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
</div>
</div>
<div class="form-group">
<label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
</div>
</div>
<div class="form-group">
<label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
</div>
</div>
<div class="form-group">
<label for="inputTown3" class="col-sm-2 control-label">Town</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
</div>
</div>
<div class="form-group">
<label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
</div>
</div>
<div class="form-group">
<label for="inputValue3" class="col-sm-2 control-label">Value</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
<button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Copyrights</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
</div>
</nav>
</body>
</html>
/* site.css */
body {
padding-top: 70px;
padding-bottom: 50px;
}
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: white;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: white;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: white;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
It's quite annoying when the page moves up and creates a poor user experience. As this issue doesn't occur when not using Angular I'm inclined to believe that Angular could be the problem, although I cannot see how.
EDIT
I've updated the plunkr so that it now uses AngularJS and the page doesn't move up. I am wondering if this is because I have the index.html page being rendered by ASP.NET MVC?
<!-- Index.html -->
#{
Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Orbit Works</title>
#Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
<ptl-header></ptl-header>
<div class="container">
<div ui-view></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Michael John Clarke.</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
</div>
</nav>
#Scripts.Render( "~/bundles/script/libraries" )
#Scripts.Render( "~/bundles/script/app" )
</body>
</html>
Adding autoscroll="untrue" to the ui-view directive stops the page from scrolling to the child ui-view as described here.
<div ui-view autoscroll="untrue"></div>