I have written this code testing out the $scope feature as I have just started learning AngularJS. However, whenever I click the submit button, nothing happens.
This is my JS file below.
var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope', function testAppCtrl($scope) {
'use strict';
$scope.details = {
itemId: "",
userID: ""
};
$scope.register = function () {
console.log('User clicked change', details.itemId);
};
$scope.fullDetails = function () {
return details.itemId + " " + details.userId;
};
}]);
This is my PHP file below.
<script type="text/javascript" src="include/js/angular-permission-test.js"></script>
<div id="myForm">
<form name="myForm" action="" ng-app="permissions" ng-submit="register()">
<h1>Test</h1>
<body ng-controller="testAppCtrl">
ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
<input name="submitBtn" type="submit" value="Change" ng-click="register()">
{{ fullDetails() }}
</body>
</form>
</div>
I can't seem to find the problem in the code. I have tried many solutions but none have had any apparent effect on it.
Also, any improvements to the code will be appreciated.
Thanks in advance.
The problem I think is with the structure of your HTML. Because angular scope is resolved from the HTML elements parent child hierarchy.
Your testAppCtrl is in body (which is inside your form), the register() function is inside the scope of testAppCtrl (but you are trying to access it outside the body). So, you cannot access it from outside in hierarchy. Keep the Body outside and form inside. Also the ng-app should be at the same or higher level of your ng-controller. Because you can bind your controllers to the app/module and not the reverse.
So, the code should be something like this,
<body ng-app="permissions" ng-controller="testAppCtrl">
<div id="myForm">
<form name="myForm" action="" ng-submit="register()">
<h1>Test</h1>
ItemId: <input type="text" ng-model="details.itemId"> {{details.itemId}}<br><br>
UserId: <input type="text" ng-model="details.userId"> {{details.userId}}<br><br>
<input name="submitBtn" type="submit" value="Change" ng-click="register()">
{{ fullDetails() }}
</form>
</div>
</body>
Couple of things I noticed. ng-app should be declared inside ng-controller.
you are returning plain variables instead of the scope variables.
Anyway, here's the fix.
var app = angular.module('permissions', []);
app.controller('testAppCtrl', ['$scope',
function testAppCtrl($scope) {
'use strict';
$scope.details = {
itemId: "",
userID: ""
};
$scope.register = function() {
console.log('User clicked change', $scope.details.itemId);
};
$scope.fullDetails = function() {
return $scope.details.itemId + " " + $scope.details.userId;
};
}
]);
<!DOCTYPE html>
<html ng-app="permissions">
<head>
<script data-require="angular.js#1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testAppCtrl">
<div id="myForm">
<form name="myForm" ng-submit="register()">
<h1>Test</h1> ItemId:
<input type="text" ng-model="details.itemId" />{{details.itemId}}
<br />
<br />UserId:
<input type="text" ng-model="details.userId" />{{details.userId}}
<br />
<br />
<input name="submitBtn" type="submit" />{{ fullDetails() }}
</form>
</div>
</body>
</html>
Related
I am new to AngularJS and try to implement form validation in "myApp" app.
I wrote the code below. The {{result}} should output "true"/"false". But it didn't work.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name = "myForm">
<p>Input the field: </p>
<input type = "text" name="myInput" ng-model = "myInput" required>
</form>
<p> The result:</p>
<p>{{result}}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.result = myForm.myInput.$valid;
});
</script>
</body>
This must be correct code for your problem.
If you "watch" the changes in the "input field" then $valid result will generate.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<form name='myForm' novalidate>
<p>Input the field: </p>
<input type='text' ng-model='model.name' name='myInput' required/>
</form>
<p> The result:</p>
<p>{{myForm.myInput.$valid}}</p>
<script>
var app = angular.module('myApp', []);
app.controller('MyController',['$scope',function($scope) {
$scope.$watch('myForm.myInput.$valid',function(newValue,oldvalue) {
if(newValue) {
//do anything with new value
}
});
}]);
</script>
</body>
</html>
Hope this will be helpful to you.
As a new User to angularJS your approcach is some how correct in form validation.In future you will learn new vesions in angular and several validation methodologies.
following code line is the way that how we can check valid input in angularJS.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Your approach is correct.Keep it up and it will be great if you can define correct question clearly. :)
Cheers.
I am making a simple validation of required, but unable to find ng-Message working on wrong entry or on clicking submit. Can someone help me out where am I wrong?
HTML:
<html>
<head>
<!-- Script Files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="form1" id="form1" novalidate>
<input type="text" name="age" ng-minlength="3" required/>
<div ng-messages="form1.age.$error" ng-show="(form1.age.$error.required || form1.age.$error.minlength) && (form1.age.$touched || form1.$submitted) " >
<div ng-message="required">This is required</div>
<div ng-message="minlength">Length is too less</div>
</div>
<a data-ng-click="submit(form1.$invalid)">Click</a>
</form>
<script>
//module declaration
var app = angular.module('myApp', ['ngMessages']);
//controller declaration
app.controller('myCtrl', function($scope) {
var submit = function(invalid){
if(invalid) return;
}
});
</script>
</body>
</html>
Your age input has no ng-model. Validation alá minlength only works if ng-model is present:
<input type="text" name="age" ng-model="age" ng-minlength="3" required/>
This is due to how validators work. You'll notice ng-model is not set, when $valid is false. There's always a hint in the docs as well: https://docs.angularjs.org/api/ng/directive/ngMinlength
Also ng-model doesn't need to be the same as the field name.
When I click submit button, the form gets submitted instead of validating for the required fields.
Markup
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta charset="UTF-8">
<title>HTML 5</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div id="container">
<p ng-show="msg"> {{ msg }}</p>
<form name="myForm" novalidate ng-submit="valid()">
<p> Name <input type="text" name="name" id="" ng-model="user.name" ng-required=true></p>
<p ng-show="myForm.name.$invalid && myForm.name.$touched">name is required</p>
<p> Email <input type="email" name="email" id="" ng-model="user.email" ng-required=true> </p>
<p ng-show="myForm.email.$invalid && myForm.email.$touched">must be a valid email</p>
<input type="submit" value="submit">
</form>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.valid = function() {
$scope.msg = "form submitted";
}
}]);
</script>
</body>
</html>
Any help would appreciated. Thanks
Shortest way to call function if form is validate is dictated below, which will fired up valid function only when form is valid.
ng-submit="myForm.$valid && valid()"
Or other way would be check myForm object in $scope, because when you give name="myForm" on form, angular does create a object inside scope that have all the information field information inside that object.
$scope.valid = function(){
if($scope.myForm.$valid){
//form is valid
//do $http.post call if you wanted to submit form data
}
else {
alert('form is invalid');//some how notify user that form is invalid.
}
}
You can just disable the submit button using:
ng-disabled="boolean expression"
in your case it will be simply:
<input type="submit" value="submit" ng-disabled="!myForm.$valid">
Try to put:
$scope.valid=function() {
if ($scope.myForm.isValid()) $scope.msg="form submitted";
else $scope.msg="form with errors";
}
hope it helps
I am trying to append the form submit using Angular but I receive an error when I submit more than one consecutive similar values. For example if I submit "John" and then try to submit another "John" the program crashes. Can someone explain it to me? and a tip how to fix it?
*Also can anyone tell me how to append the results in one line?
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<p ng-repeat="text in outputArr">{{text}}</p>
</div>
</div>
</body>
</html>
ng-repeat can't handle duplicate values.
you have to change
<p ng-repeat="text in outputArr">{{text}}</p>
to
<p ng-repeat="text in outputArr track by $index">{{text}}</p>
and the <p> element to <span> for one line visualization.
<span ng-repeat="text in outputArr track by $index">{{text}} </span>
Here is the simpliest solution to your problem:
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push($scope.inputText);
$scope.inputText = '';
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText" required/>
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<span ng-repeat="text in outputArr track by $index">{{text}} </span>
</div>
</div>
</body>
</html>
Or you can wrap your item value into an object
angular.module("displayText", [])
.controller("submitText", function($scope) {
$scope.outputArr = [];
$scope.print = function() {
$scope.outputArr.push({
text : $scope.inputText
});
};
});
<html ng-app="displayText">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<body ng-controller="submitText">
<div>
<form method="get">
<input type="text" name="post" ng-model="inputText">
<button ng-click="print(inputText)">Submit</button>
</form>
<div id="page">
<p ng-repeat="entry in outputArr">{{entry.text}}</p>
</div>
</div>
</body>
</html>
I am trying to learn angular so forgive my stupid mistakes and ignorance. That being said,
I add data to my scope when I create my controller ProducerCtrl. This works before I add anything else. When I add the addname function it breaks my data fetch. I am sure I am doing something wrong because I don't know what I am doing. I would like to have these
two bits of code work. Maybe I need to move one or both to another area.
<html><head>
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
var eventApp = angular.module('eventApp', []);
var szAction = "/GoGetData";
var szAction2 = "/GoPostData" })";
eventApp.controller('ProducerCtrl', ['$scope', '$http', function (scope, http) {
http.get(szAction).success(function (data) {
scope.producer = data;
});
$scope.addName = function () {
http.post(szAction2, scope.producer);
};
}]);
</script>
</head>
<body>
<div ng-app="eventApp">
<div ng-controller="ProducerCtrl">
Name:<input ng-model="producer.Name" type="text" /><br>
Hello {{producer.Name}}
<form ng-submit="addName()">
<input ng-model="producer.Name" type="text">
<input type="submit" value="add">
</form>
</div>
</div>
</body></html>
I've made some changes on your code. When you click on add will prompt an alert.
Your HTML:
<body>
<div ng-app="eventApp">
<div ng-controller="ProducerCtrl">
Name:<input ng-model="producer.Name" type="text" /><br />
Hello {{producer.Name}}
<form ng-submit="addName()">
<input ng-model="producer.Name" type="text" />
<input type="submit" value="add" />
</form>
</div>
</div>
<body>
Your Angular code:
var eventApp = angular.module('eventApp', []);
eventApp.controller('ProducerCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.producer = { Name : '' };
$scope.addName = function () {
alert($scope.producer.Name);
};
}]);
See here.
Take a look here to check $http.