I get an error when I run the following code to reset my form:
$scope.saveFormData = function () {
$scope.testForm.$setPristine();
}
And HTML:
<form name="testForm" >
<label class="item item-input item-stacked-label">
<span class="input-label">Title</span>
<input type="text" ng-model="formData.shortDesc" required="">
</label>
<button class="button button-block button-positive" type="submit" ng-click="saveFormData()" >Opslaan </button>
</form>
It works fine, here is the JSFiddle, try to add the condition if the form exists, but I don't know what error you get:
function MyCtrl($scope) {
$scope.saveFormData = function() {
if ($scope.testForm) {
$scope.testForm.$setPristine();
$scope.formData = {};
}
};
}
Related
I have a simple query submission form with name, email and query fields and a component with a controller function having the submit function to submit the form.
I am using ng-submit directive in the <form></form> tag to submit the user input and display a success message on submission.
below is the code for the respective files.
contact.html
<div ngController="contactController as vm">
<div class="heading text-center">
<h1>Contact Us</h1>
</div>
<div>
<form class="needs-validation" id="contactForm" novalidate method="post" name="vm.contactForm" ng-submit="saveform()">
<div class="form-group row">
<label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="vm.name" required>
<div class="invalid-tooltip">
Please enter your full name.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">#</span>
</div>
<input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email"
aria-describedby="validationTooltipUsernamePrepend" ng-model="vm.email" required>
<div class="invalid-tooltip">
Please choose a valid email.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipQuery" ng-model="vm.query" placeholder="Query" required>
<div class="invalid-tooltip">
Please write your Query.
</div>
</div>
</div>
<div class="btn-group offset-md-5">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
</div>
</form>
<span data-ng-bind="Message" ng-hide="hideMessage" class="sucessMsg"></span>
</div>
</div>
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
$scope:{},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
factory:'userService',
$rootscope:{}
});
function contactController($scope, $state,userService,$rootScope) {
var vm = this;
$scope.navigate = function(home){
$state.go(home)
};
$scope.saveform = function(){
$scope.name= vm.name;
$scope.email= vm.email;
$scope.query= vm.email;
$scope.hideMessage = false;
$scope.Message = "Your query has been successfully submitted."
};
$scope.user = userService;
};
//localStorage code
function userService($rootScope) {
var service = {
model: {
name: '',
email: '',
query:''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
$rootScope.$broadcast('savestate');
};
};
UPDATE: On Submit, When I check the response in network tab in dev tools, I do not see the submitted values. All I see is the markup.
In your template, the name of the method is saveform:
ng-submit="saveform()"
But in your controller, it's save:
$scope.save = function() { ... }
Rename it to saveform:
$scope.saveform = function() { ... }
I am not able to see error message on clicking the submit button using angularjs.
Any lead will be appreciated
Thanks in advance :)
<form id="formbody" ng-submit="submituser(form)" name="form" novalidate>
<input type="text" ng-class="{ errorinput: submitted && form.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
<!-- <div type="button" id="btn" style="color: red;" >Submit</div> -->
</div>
</div>
</form>
.controller('ExampleController', function($scope, $location, $scope, $stateParams) {
$scope.singleSelect = '';
$scope.goToPage = function() {
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submituser = function($scope) {
if ($scope.form.$valid) {} else {
$scope.submitted = true;
}
}
})
change ng-show of span to
<span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
please check the form name
you have used two different names
name ="form" in form tag and used as signUpForm.dob in input field.
Check your ng-model to
<form id="formbody" ng-submit="submituser(form)" name="signUpForm" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="form.dob" placeholder="Date of Birth" required />
<span class="e" ng-if="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<div style="padding-left: 275px;">
<button type="submit">Submit</button>
</div>
</div>
</form>
.controller('ExampleController',function($scope,$location,$scope, $stateParams){
$scope.singleSelect='';
$scope.goToPage=function(){
console.log("selectservice");
$location.path("/selectservice");
}
$scope.submitted =false;
$scope.submituser = function(form){
// console.log(form);
if (form.$valid) {
your logic
} else {
$scope.submitted = true;
}
}
})
Try something like that
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.dob.$invalid]">
<label class="control-label" for="dob">Your Date of Birth</label>
<div class="controls">
<input type="text" name="dob" ng-model="dob" required />
<span class="help-inline" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
You have to provide the form name but even after that you cannot refer to your form in controller unless you pass it through the submit function arguments. Also there is not signupForm() function in your controller.
The way to go is :
<form id="formbody" name="myForm" ng-submit="signupForm(myForm)" novalidate>
<!-- inputs etc -->
</form>
Then based on submituser():
$scope.signupForm = function(myForm) {
//Do whatever you want to do
if(myForm.$valid) {
//some logic
}else {
$scope.submitted = true;
}
}
On the other hand if you don't want to mess up with the controller you can always use FormController method $submitted. This would look like:
<span class="e" ng-show="myForm.$submitted && myForm.dob.$invalid">Please provide a valid date of birth</span>
All in-line validations in HTML side are working OK, but when I use functions in my Controller (functions ingresarNuevoEmpleador and limpiarNuevoEmpleador), always get $invalid=true. $setPristine neither works.
Apparently both sides are referencing different objects because controller functions
do not modify the state of the html side validators.
<form name="frmEmpleadorDirecto" novalidate>
<div class="row">
<div class="col-xs-8 col-sm-8">
<div class="form-group has-feedback"
ng-class="{'has-error': frmEmpleadorDirecto.nempleador.$invalid && (frmEmpleadorDirecto.nempleador.$touched || frmEmpleadorDirecto.$submitted)}">
<label for="input501">Empleador Directo</label>
<input type="text" class="form-control text-uppercase" name="nempleador" placeholder="Nombre Empleador" ng-model="objEmpleador_.nombreEmpleador_" ng-minlength="2" ng-maxlength="30" ng-required="true">
<span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.minlength && frmEmpleadorDirecto.nempleador.$touched">too short</span>
<span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.maxlength && frmEmpleadorDirecto.nempleador.$touched">too long</span>
<span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.required && frmEmpleadorDirecto.nempleador.$touched">required</span>
</div>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-success btn-mm" ng-disabled="frmEmpleadorDirecto.$pristine || frmEmpleadorDirecto.$invalid" ng-click="ingresarNuevoEmpleador()">Aceptar</button>
<button type="button" class="btn btn-warning btn-mm" ng-click="limpiarNuevoEmpleador()">Limpiar</button>
</div>
</form>
Controller:
angular.module('BlurAdmin.pages.empleador_')
.controller('CtrlEmpleadorNuevo',CtrlEmpleadorNuevo);
function CtrlEmpleadorNuevo($scope,$http,$rootScope) {
$scope.objEmpleador_ = new eva.Empleador_();
$scope.ingresarNuevoEmpleador = function()
{
console.log("Nombre: " + $scope.objEmpleador_.nombreEmpleador_); //OK
if($scope.objEmpleador_.$valid) //always invalid
{
console.log('valid!');
}else {
console.log('invalid!'); }
}
$scope.limpiarNuevoEmpleador = function ()
{
$scope.objEmpleador_.$setPristine; //no changes
$scope.objEmpleador_.nombreEmpleador_ = ''; //Works: reset html field
}
}
Objects:
eva.Empleador_ = function() {
var self = this;
self.nombreEmpleador_ = '';
};
Your form is bound on your $scope and inputs and their validity can be reached following the name attribute.
$scope.ingresarNuevoEmpleador = function(){
console.log("Nombre: " + $scope.objEmpleador_.nombreEmpleador_); //OK
if($scope.frmEmpleadorDirecto.nempleador.$valid) {
console.log('valid!');
}else {
console.log('invalid!');
}
};
Plunker
Consider the following JS
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
);
And the following HTML
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
My problem is that when the page loads, "test" is written in the text field, but when I change the field or press the button, nothing happens (console says "test" on every change or button click. Anyone know what I did wrong?
Try to wrap the value in an object. Objects are passed by reference, but simple values are passed as a copy of that value. It happened to me too several times.
Try this approach
$scope.myObject.searchBooking = "test"
So the full code will look like this
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.myObject.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.myObject.searchBooking);
//$location.path('/bookings/' + $scope.myObject.searchBooking);
//delete($scope.myObject.searchBooking);
}
$scope.printValue = function() {
console.log($scope.myObject.searchBooking);
}
}
);
and the html
<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">
Find this fiddle which is having ng-model binding in ng-change.
HTML
<div ng-controller="MyCtrl">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
Angular controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
I'm stuck with this simple form submission. I feel that everything is right, but it doesn't work.
My html :
<html ng-app = 'myApp'>
<div ng-controller="Tabs">
...
<form ng-submit="sendClicked()" >
<div class="input-group">
<input type="text" class="form-control" ng-model="text"/>
<span class="input-group-btn" >
<button class="btn btn-info" type="submit">SEND</button>
</span>
</div>
</form>
...
</div>
</html>
My app.js :
myApp.controller('Tabs', function ($scope) {
$scope.sendClicked = function () {
console.log('can reach here');
if($scope.text) {
socket.emit('send message', $scope.text);
$scope.text = null;
}
};
});
Must be input type submit, but you have button, that doesn't ever have type attribute property