I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages.
When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is mandatory'.
If I remove the element outside the md-input-container, it works fine (but I want the ng-messages inside the md-input-container obv).
<div layout-gt-sm="row" ng-show="showAddress">
<md-input-container class="md-block" flex-gt-sm="">
<md-icon md-font-library="material-icons">home</md-icon>
<label>Adres</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
Update:
Ok I was using an older version of Angular and Angular-Animate (1.3.15).
Updating this resulted in the fix.
First check if you have ngMessages injected in your module again, second you can check if you have a form with the name 'orderForm' and last you must check if your ng-model has a controller or something where you have the data.
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
</style>
</head>
<body ng-app="testApp" ng-controller="AppCtrl">
<form name="orderForm">
<div layout-gt-sm="row" >
<md-input-container class="md-block" flex-gt-sm="">
<label>Address</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
</form>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial","ngMessages"])
.controller('AppCtrl', function($scope) {
$scope.address = 'Prueba';
});
</script>
</body>
</html>
Had the same issue, installing ngMessages into your app resolved this issue for me.
Related
I am trying to display validation message for text field which is not working for below code -
<form name="dummy">
<bloglist></bloglist>
</form>
<script type="text/ng-template" id="my">
<div>
<input type="text" name="first" ng-model="sample.hai" required/>
<span ng-show="dummy.first.$error.required">Required</span>
</div>
</script>
<script>
angular.module("DemoApp" [])
.component( 'bloglist' , {
templateUrl: 'my.html',
controller: function ($scope) {
}
});
</script>
AngularJS has bindings that you will use in place of HTML attributes in some cases. Instead of using native HTML5 required on your <input> use ng-required="true".
(edit) link to relevant documentation: https://docs.angularjs.org/api/ng/directive/ngRequired#!
(edit):
In your particular case, the form name in the template that invokes your directive is not accessible inside your directive. We give the directive form a unique name.
Additionally, using angularjs to display your (custom) error message can be done using ngMessages.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-messages.js"></script>
<body ng-app="DemoApp">
<form name="dummy">
<bloglist></bloglist>
</form>
</body>
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
<script type="text/ng-template" id="my.html">
<div ng-form="directiveForm">
<input type="text" name="first" ng-model="sample" required/>
<pre>{{ directiveForm.first.$error | json }}</pre>
<div ng-messages="directiveForm.first.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
</div>
</div>
</script>
<script>
angular.module("DemoApp", ['ngMessages'])
.component('bloglist', {
templateUrl: 'my.html',
controller: function($scope) {
}
});
</script>
I have an angularjs application using ui-router, when i access the following URL http://localhost:63342/UIRouter/customlogin, as per the ui-route configured it has to display the customlogin.html page but its not, it gives 404 error page
in the above url UIRouter is the application name and /customlogin is the state's url.
could somebody help me in getting this solved...please
below is the plnkr url
https://plnkr.co/edit/SPOr9IUWWSAIxNbfnBox?p=preview
below are my files
baseApp.js
angular.module('baseApp',['baseApp.routes']);
baseApp.routes.js
angular.module('baseApp.routes',['ui.router'])
.config(['$stateProvider','$urlRouterProvider','$httpProvider',function($stateProvider,$urlRouterProvider,$httpProvider){
console.log("in view");
$stateProvider
.state("login",{
url:'/customlogin',
templateUrl:'customlogin.html',
controller:'ContactLoginCtrl'
})
$urlRouterProvider.otherwise("/customlogin");
}]) ;
ContactLoginCtrl.js
angular.module('baseApp')
.controller('ContactLoginCtrl', ['$scope',function($scope){
console.log("in the controller")
}])
customlogin.html
<html lang="en" ng-app="baseApp">
<body>
<form name="contactLogin" ng-controller="ContactLoginCtrl" ng-submit="authenticate(userModel)">
<label for="name" >UserName:</label>
<input type="text" ng-model="userModel.username" /></br>
</br>
<label for="password" >PassWord: </label>
<input type="password" ng-model="userModel.password" />
</br>
</br>
<button type="submit" name="Login" >Login</button>
</form>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="baseApp.js"></script>
<script src="baseApp.routes.js"></script>
</body>
</html>
Among other adjustments, the most important is - to have a target for states. We need:
<div ui-view></div>
There is adjusted and working plunker
I am working on uib-popover recently, I found a problem that I am confused with.
I want to popover a template, in this template I have an input, at first the input have initial value.
I want to update the content real-time based on the input. When I just bind a variable, it does not work, while if I bind an object, it works. I can't figure this problem out.
index.html
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<hr/>
<hr/>
<hr/>
<button uib-popover-template="'myPopoverTemplate.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{dynamicPopover.title}}
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<input type="text" ng-model="dynamicPopover.title" class="form-control">
</div>
</script>
<button uib-popover-template="'inputContent.html'" popover-placement="bottom-left" type="button" class="btn btn-default">Popover With Template</button>
{{inputContent}}
<script type="text/ng-template" id="inputContent.html">
<div class="form-group">
<input type="text" ng-model="inputContent" class="form-control">
</div>
</script>
</div>
</body>
</html>
example.js
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function($scope, $sce) {
$scope.dynamicPopover = {
title: 'Title'
};
$scope.inputContent = "hello";
});
Here is the plunker example https://plnkr.co/edit/IPXb5tddEPQPPAUrjdYx?p=preview, you could have a try.
You made an interesting point in your second plunk. I didn't catch this the first time but I think it may be because you are doing your popover input in a script tag. I would suggest using a custom directive if you could versus just doing it in an inline script. That way it is kept up to date with angular's digest cycle.
Example Directive:
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
And to use it:
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
{{message}}
<script type="text/ng-template" id="customPopover.html">
<div class="form-group">
<input type="text" ng-model="message" class="form-control">
</div>
</script>
Here is a working plunk. I hope this is what you're looking for
I am new to Angular JS. Here is my html :
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src = "angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
</html>
Then I want to initialize some data for username and password :
(function(){
var app=angular.module("myApp",[]);
app.controller("index", ["$scope", function($scope){
$scope.message="Hello, it's me!";
$scope.user={
username: "admin",
password: "admin"
};
}]);
})();
The username and password doesn't get displayed. Why?
You're problem is that you have bound the controller to the div-tag surrounding the {{message}} expression and not the whole block containing the form. If bind your controller to a surrounding element youre code will work as expected.
Here's one way to do this:
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
</body>
Your controller div is not covering the area where you have user object. controller div must include the code in which you are accessing user object
You can change the code like this
<body ng-app="myApp">
<div ng-controller="index">
{{message}}
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script src = "app.js"></script>
<script src = "credentials.js"></script>
</body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
as you can see in this example
ng-model directive binds the value of HTML controls (input, select,
textarea) to application data. ng-bind directive binds application
data to the HTML view.
i can see ng-model in your code but there is not ng-bind which actually binds data to your view. probably that is the reason why your code is not displaying username and password.
With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
ng-model for input elements like input, textarea and ng-bind for h1,label etc.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="index" ng-app="myApp">
<form>
First Name:
<br>
<input type="text" ng-model="user.username">
<br> Last Name:
<br>
<input type="password" ng-model="user.password">
</form>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("index", ["$scope", function($scope) {
$scope.user = {
username: "admin",
password: "admin"
};
}]);
</script>
</body>
</html>
As,Venu prasad H S and domyos already suggested , a reply to the comment of M. Ko as i don't have enough reputation to comment,
You have defined the ng-model out of the scope of the controller,
<div ng-controller="index">
{{message}}
</div>
What this does is that your controller can access only the stuff inside this div only, as many others suggested you can put an entire div in the body you can do
<body ng-app="myApp">
<div ng-controller="index">
<div>
{{message}}
</div>
<form>
First Name:<br>
<input type="text" ng-model="user.username">{{user.username}}<br>
Last Name:<br>
<input type="password" ng-model="user.password">
</form>
</div>
As very aptly provided by domyos , now what this does is that your controller can get to your form and you can display the values you desire.
Alternatively you can also but your controller in the body tag with your ng-app
<body ng-app="myApp" ng-controller="index">
but it is recommended that you put it inside a div, you want to do this so that you can have multiple controllers in one module i.e. on ng-app.
Also, try to name controller as "indexCtrl" as in IndexController it is just a naming convention but that makes your code more readable.
Hope you find this information useful.
Use ng-app and ng-controller directives in your HTML page.
Here is link of Plunker for the same.
Plunker
And donot forget to give reference
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
I am working through Pro AngularJS by Adam Freeman and have not been able to get the Using Checkboxes example to work.
The example tries to show that you can set attributes ng-true-value="Hurrah!" and ng-false-value="Boo!" and are displayed through ng-model="inputValue".
This is not working.
I am only able to get this sample to work by setting integer values inside ng-true-value and ng-false-value.
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Forms</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {});
</script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<form name="myForm" novalidate>
<div class="well">
<div class="checkbox">
<label>
<input name="sample" type="checkbox" ng-model="inputValue"
ng-true-value="Hurrah!" ng-false-value="Boo!">
This is a checkbox
</label>
</div>
</div>
<div class="well">
<p>Model Value: {{inputValue}}</p>
</div>
</form>
</div>
</body>
</html>
According to the documentation for input[checkbox], ng-true-value and ng-false-value accept expressions. Since you are trying to pass a string literal as the value, you need to enclose them in an addional pair of quotes.
Try ng-true-value="'Hurrah!'" ng-false-value="'Boo!'"