I have a form...
<form name="userForm" ng-submit="setUsers()">
<input type="number" class="form-control" name="users" ng-model="users.num" required>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Continue</button>
</form>
And in my controller I want to see if the form is $pristine...
angular.module('myApp')
.controller('myController', ['$http', '$scope', function($http, $scope) {
$scope.userForm = {};
$scope.users = {};
console.log($scope.userForm) //empty object
console.log($scope.userForm.$pristine); // undefined
console.log($scope.users); //empty object
console.log($scope.users.num); //undefined
}]);
What am I doing incorrectly that I cannot get the form in my controller? I am using AngularJs 1.3
Thanks!
You cannot access form because you are trying to do that before it exist. Please see code example below that can helps you.
var app = angular.module('app',[]);
app.controller('fCtrl', function($scope){
$scope.setForm = function (form) {
$scope.userForm = form;
$scope.users = {};
console.log($scope.userForm) //empty object
console.log($scope.userForm.$pristine); // undefined
console.log($scope.users); //empty object
console.log($scope.users.num); //undefined
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<form name="userForm" ng-submit="setUsers()">
<input type="number" class="form-control" name="users" ng-model="users.num" required>
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Continue</button>
<span ng-init="setForm(userForm);"></span>
</form>
</div>
</div>
You have to wait for the form to be available. If you access it after the controller has been loaded you will be able to gain access to it.
Test it quickly with something like:
console.log($scope.userForm); // undefined
$scope.logForm= function(){
console.log($scope.userForm); // defined
};
Open your console and see this bin http://jsbin.com/loqic/1/edit?js,output
Related
i have little modified this question which already exist
<form ng-submit="add()">
<input type="text" name="field">
<input type="submit" value="Submit">
</form>
I'd like to have input[name="field"] value as a parameter of add().
Is there any way to do that?
Answer to question
Html:
<div ng-controller="MyFormController">
<form ng-submit="add(field)">
<input type="text" name="field" ng-model="field" />
<input type="submit" value="Submit" />
</form>
</div>
JS:
app.controller('MyFormController', ['$scope', function(scope) {
scope.add = function(field) { // <-- here is you value from the input
// ...
};
}]);
my problem is
HOW to reset input field to be empty after form submit in this case
Your HTML should be like that:
<div ng-controller="MyFormController">
<form ng-submit="add()">
<input type="text" name="field" ng-model="fieldname" />
<input type="submit" value="Submit" />
</form>
</div>
and your JS field should be like that:
app.controller("MyFormController", function($scope) {
$scope.add = function () {
var hi=$scope.fieldname;//you can use it parametre
}
});
After two days googling i found my solution with this statement
give an id to the input field for example 'clearfield' and than add the following
statement after the .success function
angular.element('#clearfield').val('');
You don't need to pass this as an argument. Since your input has a ng-model="field" this is a $scope variable which is accessible in your function already
app.controller('MyFormController', ['$scope', function(scope) {
$scope.add = function() {
// your code here
$scope.field = ''; // reset field to an empty string
};
}]);
I have simple form. I need to show errors about my fields.
<html lang="en" ng-app="MyApp">
<head></head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And this is my controller
angular.module('MyApp',[])
.controller('AppCtrl', function() {
var form = document.getElementById("myForm");
var error = {
myField: 'Error in this field'
};
for (var key in error) {
form[key].$error = error[key];
}
});
Why I can't see error about myField? I get only '{}'
You're not binding the form to AngularJS correctly
<form name="myForm" id="myForm">
This says your form is called myForm, so in your controller you should be using $scope.myForm
No need for var form = document.getElementById("myForm");, just use $scope.myForm in your controller
Try this to see if you access the the form from AngularJS
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
I want to reset form and all validation messages after submitting a form. Here is plunker:http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview
My code is bellow:
Controller:
app.controller('MainCtrl', function($scope) {
$scope.data={fullName:''};
$scope.submit=function(){
console.log('submit')
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
$scope.data={fullName:''};
}
});
HTML:
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div>
<label class="control-label">Name</label>
<input
name="full_name"
type="text"
ng-model="data.fullName"
ng-required="true">
<p ng-if="myForm.$submitted && myForm.$invalid">Validation message</p>
</div>
<button ng-click="submit()" type="submit">
Submit
</button>
</form>
</body>
My problem is:
when user enters name in the input and clicks on Submit button, validation message shouldn't be shown, because model, form and validation should be resetted. How I can do it?
I tried to use $setPristine() and $setUntouched(), but it doesn't work for me.
Is it possible to do in AngularJS? Thanks!
I'm surrpised but $setpristine() doesn't update $submitted.
This may not be the prettiest solution but seems to work:
app.controller('MainCtrl', function($scope, $timeout) {
$scope.data = {
fullName: ''
};
$scope.submit = function() {
console.log('submit')
$scope.data = {
fullName: ''
};
$timeout(function() {
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
$scope.myForm.$submitted = false;
});
}
});
DEMO
We are using angular to do like/unlike behavior for our app.
Code for html
<html>
<body ng-app="myApp">
<div ng-controller="newsCntrl" >
<form ng-submit="post()" name="postForm" id="postForm" >
<input type="submit" id="submit" value="Submit"/>
</form>
Like</span>
</div>
</body>
</html>
Code for controller
myApp.controller("newsFeedCtrl", function ($scope, $http) {
console.log("inside newsFeedCtrl");
$scope.post() = function() {
console.log("posting");
}
$scope.likePost = function(postId) {
console.log("liking post");
}
});
The problem is when we click on like; it also calls post function which should not be happening.
Are we missing anything here?
There is a mismatch between the controller name in the HTML:
<div ng-controller="newsCntrl" >
and the controller in the JS:
myApp.controller("newsFeedCtrl", function ($scope, $http)
If I fix it, it seems to work.
Check this fiddle
You should remove syntax error
Code for html:
<html>
<body ng-app="myApp">
<div ng-controller="newsCntrl">
<form ng-submit="submitPost()" name="postForm" id="postForm">
<input type="submit" id="submit" value="Submit"/>
</form>
Like
</div>
</body>
</html>
Code for controller:
myApp.controller("newsFeedCtrl", function ($scope, $http) {
console.log("inside newsFeedCtrl");
$scope.submitPost = function() {
console.log("posting");
}
$scope.likePost = function(postId) {
console.log("liking post");
}
});
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.