I have the requirement, that all error messages have to be shown in the header of the application. How can I do that with angular?
If I have this application (see on plunker):
<body>
<div id="header">
<!-- I want error messages to show up here -->
</div>
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>
What I need is to have the error messages in the header div. How can I do that?
Fixed demo here.
Just access the error the way same as in form, as when you set <form name="myForm" >, then you will get $scope.myForm = [yourFormObject], then access free anywhere in same controller.
Angular Form Document
Under the title Binding to form and control state
A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.
And, even access the $error in controller by $scope.$watch('formName.fieldName.$error',function(nv,ov){});
// Code goes here
var app = angular.module('plunker', ['ngMessages']);
app.controller('appCtrl', function($scope) {
$scope.$watch('myForm.myEmail.$error', function(nv, ov) {
console.info(nv);
}, true);
});
/* Styles go here */
hr {
margin: 20px 0;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appCtrl">
<div id="header">
<div ng-show="myForm.myEmail.$error.required">required</div>
<div ng-show="myForm.myEmail.$error.email">invalid email</div>
</div>
<hr />
<form name="myForm">
<label>Email</label>
<input name="myEmail" type="email" ng-model="user.email" required="" />
<div ng-messages="myForm.myEmail.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
<p>Your email address is: {{user.email}}</p>
</body>
</html>
You'll have two distinct controller.In header controller, you'll be displaying your error messages.
Then your controller will be communicating over either $rootScope or service
Related
My question is about handling client side validations for a large Angular app. I have a big SPA app with different components which includes reusable components like zip control. Now I can integrate these components in my page form but how can I trigger the validations for elements residing within the components. For e.g. my zip component has city input box, state select box and zip input box, now how can I trigger validations for these components from form submit?
I am using the following solution for my application for now. I am able to validate the required fields with this solution.
I created two input field one from the directive and other within the form. I am able to show error messages for both the fields. Similarly this can be done for some other form of validations.
Here is my plunker
https://plnkr.co/edit/laW9jYoNCszHlPeIl3Vs?p=preview
script.js
var app = angular.module('validationModule', []);
app.controller('mainCtrl', mainCtrl);
app.directive('testDirective', testDirective);
function testDirective(){
var testDirective = {
template: 'First Name: <input type="text" name="fName" required ng-model="user.firstName">'
};
return testDirective;
}
mainCtrl.$inject = ['$scope'];
function mainCtrl($scope){
$scope.submitForm = function(user){
alert(user.firstName + " " + user.lastName);
}
}
Index.html file
<!DOCTYPE html>
<html ng-app="validationModule">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.js" charset="UTF-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-sanitize.js" charset="UTF-8"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.js" charset="UTF-8"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="myForm" ng-submit="myForm.$valid? submitForm(user) : ''" novalidate>
<h1>Input User Name</h1><br/>
<test-directive></test-directive><br/>
Last Name: <input type="text" name="lName" required ng-model="user.lastName">
<button type="submit" class="btn btn-danger">Submit</button>
<div class="alert alert-danger" ng-show="myForm.$submitted">
<div ng-show="myForm.fName.$error.required">
First Name is required
</div>
<div ng-show="myForm.lName.$error.required">
Last Name is required
</div>
</div>
<br/><br/><br/>
<h1>Is form valid? {{myForm.$valid}}</h1>
</form>
</body>
</html>
I've ben struggling with this for days, I can't see where is wrong. Thing is I've set up a angularjs web with routing and controllers but the controllers are showing the data empty in the views, but in the console I can see the $scope output with the corect data throught a console.log($scope). Here is the code
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-md5/angular-md5.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
/script><sctipt src="http://getbootstrap.com/dist/js/bootstrap.min.js">
/sctipt><script src="js/main.js"></script>
</head>
<body ng-app='app'>
<div ng-view></div>
</body>
</html>
login.html
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<p class="form-title">
{{signin}}</p>
<form class="login">
<input type="text" ng-placeholder="{{user}}" required/>
<input type="password" ng-placeholder="{{password}}" required/>
<input type="submit" value="{{signin}}" class="btn btn-success btn-sm" />
<div class="remember-forgot">
<div class="row">
<div class="col-md-5">
<div class="checkbox">
<label>
<input type="checkbox" />
{{rememberme}}
</label>
</div>
</div>
<div class="col-md-7 forgot-pass-content">
{{forgotpassword}}}
</div>
</div>
</div>
</form>
</div>
</div>
</div>
main.js
var app=angular.module('app',['ngRoute']);
app.config(['$locationProvider','$routeProvider',function ($locationProvider,$routeProvider){
$routeProvider.
when('/login',{
templateUrl:'html/login.html',
controller:'loginController'
}).
when('/home',{
templateUrl:'html/home.html',
controller:'homeController'
}).
otherwise({
redirectTo:'/login'
});
}]);
app.run(function($rootScope){
$rootScope.urlapi='http://freecalendar.desirnet.com/api/api.php';
});
app.controller('loginController',function($scope,$rootScope,$location){
$scope={
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
};
console.log($scope);
$scope.login=function(){
var data=$.param({
'user':$scope.txtuser,
'password':$scope.txtpassword
});
$http.post($rootScope.urlapi,data)
.then(function(response){
response=response.data;
console.log(response);
if(response.error!=undefined){
$scope.errorlogin="El usuario y/o contraseña no son correctos";
} else {
$location.path('/home')
}
});
}
});
app.controller('homeController',function($scope,$rootScope,$location){
});
I really don't know what I'nm doing wrong, I follow many routing tutorials, but nothing.
In the console there are no errors only the $scope output.
typographical error in these line of code:
/sctipt>
You are assigning a new value to the $scope parameter in your loginController function
$scope={
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
};
You need to understand that after that you loose the link to the actual scope Angular is using. Angular simply has no way of knowing what are you intentions in your controller.
Here is the piece of code that will do the trick:
Object.assign($scope, {
'singin':'Iniciar sesión',
'user':'Usuario',
'password':'Contraseña',
'rememberme':'Recuérdame',
'forgotpassword':'Recordar contraseña'
});
Notice that it simply adds a few properties to the $scope object therefore Angular can perfectly reflect changes from your controller in your view.
I'm getting a curious error that seems to suggest my controller is not being created properly. Can anyone explain? This is my first SPA app so I'm programming in the dark a little bit.
Here is my master page:
<!DOCTYPE html>
<html ng-app="ibosApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>iBOS</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/bootstrap-select.js"></script>
<script src="/angular/scripts/route-config.js"></script>
<script src="/Scripts/bootstrap-select.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-select.css" rel="stylesheet" />
<link href="/Content/acs.css" rel="stylesheet"/>
<script type="text/javascript">
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="container body-content">
<ng-view/>
</div>
</body>
</html>
Here is my view template:
<div class="tab-content">
<div id="customers" class="tab-pane fade active in top-buffer" ng-controller="customerCtrl">
<form class="form-group">
<div class="container">
<div class="row">
<div class="col-sm-3">
<label for="customer-broker">Broker:</label>
<select class="selectpicker" id="customer-broker"></select>
</div>
<div class="col-sm-3">
<label for="customer-town">Town:</label>
<input type="text" class="form-control" id="customer-town"/>
</div>
<div class="col-sm-3">
<label for="customer-code">Code:</label>
<input type="text" class="form-control" id="customer-code"/>
</div>
<div class="col-sm-3">
<button ng-click="search()" class="btn">Search</button>
<button ng-click="myCustomers()" class="btn">My customers</button>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label for="customer-company-name">Company name:</label>
<input type="text" class="form-control" id="customer-company-name"/>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label for="customer-contact-name">Contact name:</label>
<input type="text" class="form-control" id="customer-contact-name"/>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label for="customer-customer-id">Customer ID:</label>
<input type="text" class="form-control" id="customer-customer-id"/>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
angular.module('ibosApp', ['angular-bootstrap-select', 'ngRoute'])
.controller("customerCtrl", function($scope, $http) {
$scope.loadBrokers = function() {
$http.get("/api/customers/getBrokers").success(function(data) {
$scope.brokers = data;
});
}
$scope.loadBrokers();
}
);
</script>
but I get the error "Argument 'customerCtrl' is not aNaNunction, got undefined" and the controller constructor is never called. Can anyone explain why?
M
EDIT - more code
Here is my route config...
angular.module("ibosApp", ["ngRoute"])
.config(function($routeProvider) {
$routeProvider.otherwise({
templateUrl: "/angular/components/booking-system/booking-system-template.html"
});
});
EDIT - full stack trace of error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)
There's a few things wrong.
You're setting ibosApp twice, i.e., angular.module("ibosApp", ["ngRoute"]) and angular.module("ibosApp", ['angular-bootstrap-select'])
You should only do this once, with all of your dependencies:
angular.module("ibosApp", ['ngRoute', 'angular-bootstrap-select']);
...and then use the getter syntax, which is the same, without the second parameter:
angular.module('ibosApp')
You can't define controllers in the view like you're doing unless you re-compile your angular app. It would be best to put your javascript into a separate file and include that script on your index page. The reason this isn't working is because your angular app compiles one time, then you load the view and define the controller, but angular doesn't know about that control since it wasn't there when you compiled it.
So:
app.js
angular.module("ibosApp", ["ngRoute", "angular-bootstrap-select"])
.config(function($routeProvider) {
$routeProvider.otherwise({
templateUrl: "/angular/components/booking-system/booking-system-template.html"
});
});
customerCtrl.js
angular.module('ibosApp').controller("customerCtrl", function($scope, $http) {
$scope.loadBrokers = function() {
$http.get("/api/customers/getBrokers").success(function(data) {
$scope.brokers = data;
});
}
$scope.loadBrokers();
}
);
And your markup would be
// previous script tags
<script src="app.js"></script>
<script src="customerCtrl.js"></script>
Is your module only defined in the template? If that's the case that might be your problem, the app isn't initialized since ng-app can't find the module you're trying to load. I would begin with separating JavaScript and HTML to make it easier on yourself.
after watching this presentation (https://www.youtube.com/watch?v=ImR0zo1tA_I) I wanted to try Angular JS. I copied the code, exactly what was on the screen, but i doesn't work. I tried it in my browser, in my page (http://thecodemaker.com.pl), I was doing research about AngularJS but it still doesn`t want to work.
Code :
<!DOCTYPE html>
<html ng-app="basicApp">
<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 rel="stylesheet" href="css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<form>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title"><b>ToDo List</b></h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "todo in todos">
<div class="checkbox">
<label>
<input type="checkbox"> {{todo}}
</label>
<button type="button" class="close">×</button>
</div>
</li>
</ul>
</div>
<div class="form-group has-feedback">
<label class="control-label invisible">Enter Task</label>
<input type="text" class="form-control text-primary"></input>
<button type="button" class="close form-control-feedback text-muted">±</button>
</div>
<div class="alert alert-info">Enter new task to get started</div>
<div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
</body>
</html>
Any ideas what is wrong ?
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope).
Check out the Todo example on Angular's official website, it's more up to date.
https://angularjs.org/ (scroll down).
Here's the video for it: https://www.youtube.com/watch?v=WuiHuZq_cg4
There is an error : Bootstrap's JavaScript requires jQuery, which means you need to add jQuery library to your project, required by bootstrap.js
Starting with Angular 1.3.x, you can no longer declare a controller as a generic global function on window. Controllers must now use the more current form of component declaration.
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
In the HTML, change ng-app="" to ng-app="basicApp.
Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}