Hi I am getting the following error:
Error : Cannot find module with name "my".
And also
Multiple annotations found at this line:-
Cannot find module with name my. Cannot find module with name my.
Cannot find controller with name mycontroller
Please help. Thanks But I am able to run the code perfectly though the error exists.
My code is as below:
<!DOCTYPE html>
<html ng-app="my">
<head>
<script src="angular.js"></script>
<script>
var validation = angular.module('my', []);
validation.controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
</head>
<body >
<div ng-controller="mycontroller">
<form name="form1">
<label>Name :</label> <input type="text" name="name" ng-model="firstName" required>
<span style="color: red" ng-show="form1.name.$error.required"> please provide the name</span>
<br>
<br>
<label>Email: </label> <input type="email"
name="email" ng-model="email">
<span style="color: red" ng-show="form1.email.$error.email"> please provide the valid email address </span>
<p style= "color: red" ng-show="form1.email.$error.email">please provide the valid email address</p>
<label>age :</label>
<input type="text" name="age" ng-model="age" ng-pattern="pattern">
<span style="color: red" ng-show="form1.age.$error.pattern"> please provide the correct age
</span>
</form>
</div>
</body>
</html> -->`
Try changing how your instantiating your controller. Try this:
<script>
var validation = angular.module('my', []);
angular.module('my').controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
Alternatively you could also instantiate it like this:
<script>
var validation = angular.module('my', []).controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
I have also added a JSFIDDLE that works both ways to show that they work
jsFiddle
Related
Need to show error message whenever i enter space in password input field using ng-pattern.
Use of regEx - /^\S*$/ does not allow space anywhere in the string.
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern" >White Space not allowed</div>
</form>
DEMO:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern">White Space not allowed</div>
</form>
</body>
Here is the link Jsfiddle demo
You can check for indexof or you can use regX for it.
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form>
<span>{{error}}</span>
<input type='password' ng-model='pass' ng-change='check()'>
</form>
</div>
</div>
**JS **
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.error = '';
$scope.check = function() {
$scope.pass.indexOf(' ') > -1 ? ($scope.error = 'Invalid') : ($scope.error = '');
}
})
Hope this will help you
updated for space
I have some code for adding the values from a form to the local storage,
but when I tried the code, it is not running. I would like to store the form data in local storage by clicking the button. I am adding my sample code below:
App.controller('KeyController', function($scope,$localStorage) {
/*$scope.info = 'Welcome to Test';*/
/*console.log(" Key controller is working ");*/
$scope.api_url;
$scope.api_token;
$scope.submit=function(){
localStorage.setItem('api_url','--------');
localStorage.setItem('api_token','--------');
console.log(api_url);
console.log(api_token)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<form role = "form" id="uriForm" name="authfrom">
<div class = "form-group">
<label for = "url">Enter the url to authenticate:</label>
<input type = "url" class = "form-control" placeholder = "Enter the URL" ng-model="api_url" required="required">
</div>
<div class = "form-group">
<label for = "Key">Enter the key here:</label>
<textarea class = "form-control" rows="5" placeholder = "Enter the Key" ng-model="api_token" required="required"></textarea>
</div>
<button class = "btn btn-default" ng-click="submit()">Explore!!</button>
<p class="warning">{{failed}}</p>
</form>
</div>
You haven't add your app.js file in html.
You didn't add your ng-app and ng-controller in html.
You were adding $localStorage in function which is not necessary.
You were using wrong syntax for localStorage.setItem()
Now I've edited your code and made this.
Here is index.html page
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>App</title>
<script src="angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="KeyController">
<div class="container">
<form>
<div class = "form-group">
<label for = "url">Enter the url to authenticate:</label>
<input type = "text" class = "form-control" placeholder = "Enter the URL" ng-model="api_url" required="required">
</div>
<div class = "form-group">
<label for = "Key">Enter the key here:</label>
<textarea class = "form-control" rows="5" placeholder = "Enter the Key" ng-model="api_token" required="required"></textarea>
</div>
<button class = "btn btn-default" ng-click="submit()">Explore!!</button>
<p class="warning">{{failed}}</p>
</form>
</div>
</body>
</html>
Here is your app.js file:
angular.module('app', [])
.controller('KeyController', function($scope) {
$scope.api_url;
$scope.api_token;
$scope.submit=function(){
localStorage.setItem('api_url', JSON.stringify($scope.api_url));
localStorage.setItem('api_token', JSON.stringify($scope.api_token));
console.log($scope.api_url);
console.log($scope.api_token)
}
});
You can copy paste this and check your self. First replace the reference of angular.min.js file.
Please go through the below code which has been corrected to bootstrap the angular module and set controller using ng-app and ng-controller.
Code snippets posted on stackoverflow cannot access localstorage for the reason mentioned here. So you'll need to run this code on your local development environment.
angular
.module('MyApp', []);
angular
.module('MyApp')
.controller('KeyController', [
'$scope',
function($scope) {
/*$scope.info = 'Welcome to Test';*/
/*console.log(" Key controller is working ");*/
$scope.api_url;
$scope.api_token;
$scope.savedApiUrl = '';
$scope.savedApiToken = '';
$scope.submit = function() {
localStorage.setItem('api_url', $scope.api_url);
localStorage.setItem('api_token', $scope.api_token);
var savedApiUrl = localStorage.getItem('api_url');
var savedApiToken = localStorage.getItem('api_token');
$scope.savedApiUrl = savedApiUrl;
$scope.savedApiToken = savedApiToken;
console.log($scope.savedApiUrl);
console.log($scope.savedApiToken)
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="MyApp" ng-controller="KeyController">
<form role="form" id="uriForm" name="authfrom">
<div class="form-group">
<label for="url">Enter the url to authenticate:</label>
<input type="url" class="form-control" placeholder="Enter the URL" ng-model="api_url" required="required">
</div>
<div class="form-group">
<label for="Key">Enter the key here:</label>
<textarea class="form-control" rows="5" placeholder="Enter the Key" ng-model="api_token" required="required"></textarea>
</div>
<button class="btn btn-default" ng-click="submit()">Explore!!</button>
<p class="warning">{{failed}}</p>
</form>
<p>Saved values from local storage</p>
<p>API URL: {{savedApiUrl}}</p>
<p>API Token: {{savedApiToken}}</p>
</div>
I'm new to this angular JS. I have one different issue.
Please anyone help.
I have this code in html:
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt(text_comment,user_comments)">Added into textarea</button>
and Controller code is this:
$scope.add_cmnt = function(data1, data2){
$scope.user_comments = data1+data2;
console.log($scope.user_comments);
}
When i click this added into textarea button the text-comment was append into user_comments. But it's not work. I don't know why? Please anyone help.
You can directly use the model values without sending any parameters form the function.
Also covert to string before appending.
$scope.user_comments.toString() + $scope.text_comment.toString()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.add_cmnt = function(){
$scope.text_comment = $scope.text_comment ? $scope.text_comment : ''
$scope.user_comments = $scope.user_comments ? $scope.user_comments : ''
$scope.user_comments = $scope.user_comments.toString() + ' ' + $scope.text_comment.toString()
$scope.text_comment = "";
console.log($scope.user_comments);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt()">Added into textarea</button>
</div>
</body>
</html>
Please run this snippet
Here is the fiddle link
I see your code working when i testing. But in you make some logical mistake. You can try this for your expected output.
In html
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt()">Added into textarea</button>
In Controller
$scope.add_cmnt = function(data1, data2){
$scope.user_comments = $scope.text_comment;
}
I am trying to call a external js file to implement angular js controller. Please find the code below. But it is not giving the result for the external js file access code is being added. Could someone correct me what am i doing mistake here?
[It gives the proper result if I don't have added the external js access code]
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<body ng-app="myApp">
<!-- Angular JS controller sample -->
<div ng-controller="myAppCtrl">
First name : <input type="text" ng-model="firstName"> <br>
Last name : <input type="text" ng-model="lastName"> <br>
Full name is : {{firstName + " " + lastName}} <br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myAppCtrl', function($scope) {
$scope.firstName = "Prabakar"
$scope.lastName = "Prabu"
});
</script>
<!-- Method based controller -->
<div ng-controller="methodCtrler">
<br>
First name is : <input type="text" ng-model="fName"> <br>
Last name is : <input type="text" ng-model="lName"> <br>
Full name : {{myFunction() }}
<br>
</div>
<script>
//var app1 = angular.module('myApp',[]);
app.controller ('methodCtrler', function($scope) {
$scope.fName = "Jonathan"
$scope.lName = "Gladwin"
$scope.myFunction = function() {
return $scope.fName + " " + $scope.lName;
}
});
</script>
<!-- Method call from external JS files -->
<br>
<div ng-controller ="ryanContrler">
My first name : <input type="text" ng-model="ryanFirstname"> <br>
My last name : <input type="text" ng-model="austinLastname"> <br>
My full name : {{fullName()}
</div>
<script src ="ryanNameContorller.js"></script>
</body>
</html>
ryanNameContorller.js
angular.module ('myApp', []).controller('ryanContrler', function($scope) {
$scope.ryanFirstname = "Ryan",
$scope.austinLastname = "Austin",
$scope.fullName = function () {
return $scope.ryanFirstname + " " + $scope.austinLastname;
}
});
And the result is,
You missed } in ryanContrler replace My full name : {{fullName()} with My full name : {{fullName()}}
Use this new code in ryanNameContorller.js file
angular.module('myApp').controller('ryanContrler', ['$scope', function($scope){
$scope.ryanFirstname = "Ryan",
$scope.austinLastname = "Austin",
$scope.fullName = function() {
return $scope.ryanFirstname + " " + $scope.austinLastname;
}
}]);
HTML
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<body ng-app="myApp">
<!-- Angular JS controller sample -->
<div ng-controller="myAppCtrl">
First name : <input type="text" ng-model="firstName"> <br>
Last name : <input type="text" ng-model="lastName"> <br>
Full name is : {{firstName + " " + lastName}} <br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myAppCtrl', function($scope) {
$scope.firstName = "Prabakar"
$scope.lastName = "Prabu"
});
</script>
<!-- Method based controller -->
<div ng-controller="methodCtrler">
<br>
First name is : <input type="text" ng-model="fName"> <br>
Last name is : <input type="text" ng-model="lName"> <br>
Full name : {{myFunction() }}
<br>
</div>
<script>
//var app1 = angular.module('myApp',[]);
app.controller ('methodCtrler', function($scope) {
$scope.fName = "Jonathan"
$scope.lName = "Gladwin"
$scope.myFunction = function() {
return $scope.fName + " " + $scope.lName;
}
});
</script>
<!-- Method call from external JS files -->
<br>
<div ng-controller ="ryanContrler">
My first name : <input type="text" ng-model="ryanFirstname"> <br>
My last name : <input type="text" ng-model="austinLastname"> <br>
My full name : {{fullName()}}
</div>
<script src ="ryanNameContorller.js"></script>
</body>
</html>
Demo here
There are a couple mistakes in the code that might or might not contributed to the cause.
You should spell Controller correctly. Ctrl/Ctrler/Contorller are just confusing yourself and whoever that needs to maintain your code.
angular.module('myApp',[]) should only be called once. If you need to get the app in external js file, use angular.module('myApp').
Put scripts inside <head> or <body>, don't put it in <html> directly.
You should check console log first when you encounter error. If you don't understand it, post it in the question. (Hint: press F12 to open)
The problem is your <script> to add js file is after ng-controller <div> put it inside your <head> to make sure that it call first
Your HTML:->
<html >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src ="ryanNameContorller.js"></script>
</head>
<body ng-app="myApp">
<!-- Angular JS controller sample -->
<div ng-controller="myAppCtrl">
First name : <input type="text" ng-model="firstName"> <br>
Last name : <input type="text" ng-model="lastName"> <br>
Full name is : {{firstName + " " + lastName}} <br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myAppCtrl', function($scope) {
$scope.firstName = "Prabakar"
$scope.lastName = "Prabu"
});
</script>
<!-- Method based controller -->
<div ng-controller="methodCtrler">
<br>
First name is : <input type="text" ng-model="fName"> <br>
Last name is : <input type="text" ng-model="lName"> <br>
Full name : {{myFunction() }}
<br>
</div>
<script>
//var app1 = angular.module('myApp',[]);
app.controller ('methodCtrler', function($scope) {
$scope.fName = "Jonathan"
$scope.lName = "Gladwin"
$scope.myFunction = function() {
return $scope.fName + " " + $scope.lName;
}
});
</script>
<!-- Method call from external JS files -->
<br>
<div ng-controller ="ryanContrler">
My first name : <input type="text" ng-model="ryanFirstname"> <br>
My last name : <input type="text" ng-model="austinLastname"> <br>
My full name : {{fullName()}}
</div>
</body>
</html>
as in the title.. how to prevent such operations to happen? Here is a link to the official site, see the example. The variable user.name is bound to the first input userName and if the input is empty the object user.name is removed. How can I disable this functionality of angularjs?
Try ng-model-options="{allowInvalid: true}" to update the model even for invalid entries.
<input ng-model="user.name" required ng-model-options="{allowInvalid: true}">
You've got 2 option
remove required from input tag it allows you to send back empty string to your backend
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.params = {
user: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<input name="userName" ng-model="params.user" />
<hr/>
<pre>{{params| json}}</pre>
</div>
Option two validate your form before you send it to backend.
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.user = {
name: "John"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<form name="someForm">
<input name="userName" ng-model="user.name" required name="userName" />
<span ng-show="someForm.userName.$error.required">User Name required</span>
<br/>{{user | json}}
<br/>
<button type="submit" ng-disabled="someForm.$invalid">Submit</button>
</form>
</div>