I am using sessionStorage to autosave form data while entering data into the input field.But I cannot able to save the data. If the page is refreshed the data should be present in the input field. Can anyone explain why it is not working?
My form is,
<form name="createArticleForm" ng-change="autoSave()">
<input type="text" name="firstname" ng-model="emp.firstname" required>
<input type="text" name="lastname" ng-model="emp.lastname" required>
<input type="text" name="designation" ng-model="emp.designation" required>
</form>
Js file:
$scope.autoSave= function(){
$scope.emp={};
sessionStorage.setItem('emp', JSON.stringify(emp));
var save = JSON.parse(sessionStorage.emp);
console.log(sessionStorage['emp']);
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Write something in the input field:</p>
<input type="text" ng-model="emp.firstname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.lastname" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.email" ng-change="myFunc()" ng-model="myValue" />
<input type="text" ng-model="emp.password" ng-change="myFunc()" ng-model="myValue" />
<p>The input field has changed {{value}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function() {
sessionStorage.setItem('emp', JSON.stringify($scope.emp));
$scope.value = JSON.parse(sessionStorage.getItem('emp'))
};
}]);
</script>
</body>
</html>
Related
This is my first AngularJS contact form (new to AngularJS). I've read many posts about this problem and tried many solutions, but I can't get it. Seems simple enough but I'm stumped.
I want to disable the Submit button until the required inputs (email and comments) have been populated.
Also, the email and comments error messages display immediately on page load instead of waiting for the blur.
This is the correct js (the script I was using was from a tutorial, which I misunderstood):
angular.module('contForm', [])
.controller('contCtrl', function ($scope) {
$scope.user = {};
})
<form ng-app="contForm" ng-controller="contCtrl" name="mailForm" novalidate>
<input type="text" name="name" ng-model="user.name" size="31" maxlength="50"><br>
<input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>
<span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span>
<input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>
<span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>
<input type="text" name="contComments" ng-model="user.comments" required><br>
<input type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
</form>
I can't find that error, i think your source is not complete, i used cdn angularjs.
input.btn[disabled] {
background: red;
}
<!DOCTYPE html>
<html >
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form ng-app="app" ng-controller="ctrl" name="mailForm" novalidate>
<input type="text" name="name" ng-model="user.name" size="31" maxlength="50"><br>
<input type="text" name="phone" ng-model="user.phone" size="31" maxlength="12"><br>
<span ng-show="mailForm.email.$touched && mailForm.email.$invalid">Please enter your email address. </span>
<input type="email" name="email" ng-model="user.email" size="31" maxlength="100" required><br>
<span ng-show="mailForm.contComments.$touched && mailForm.contComments.$invalid">Please enter your comments. </span>
<input type="text" name="contComments" ng-model="user.comments" required><br>
<input class="btn" type="submit" name="subComments" value="SEND" ng-disabled="mailForm.$invalid">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
});
</script>
</body>
</html>
Am creating a web application. It has a form with 5 mandatory input fields.It has 2 buttons. One is submit & another one is save for later.
When I click on submit, the form should validate all the mandatory fields & save the input given by the user. This is working fine for me.
When I click on "save for later", only the first input field should be mandatory. All other fields should be changed as optional. How to achieve this using angular js?
View
<form name="Form" ng-controller="testController">
<input name="input" type="text" id="txtName" ng-model="Name" class="form-control" required>
<select ng-model="state" ng-options="s for s in stateList" id="state" ng-change="stateOnChange()" class="form-control"></select>
<input name="input" type="text" id="txtstate" ng-model="pincode" class="form-control" required>
<input name="input" type="text" id="txtplace" ng-model="place" class="form-control" ng-required={{isRequired}}>
<button type="submit" class="btn btn-success" ng-submit="saveAction();">Save</button>
Angular Controller
$scope.isRequired = false;
$scope.stateOnChange = function () {
if ($scope.state == "TN") {
$scope.isRequired = true;
}
else {
$scope.isRequired = false;
}}
See ng-required.
The directive sets the required attribute on the element if the
Angular expression inside ngRequired evaluates to true.
Example below:
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.required = false;
}
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController as vm">
<form name="vm.form">
<label for="required">Toggle required:</label>
<input type="checkbox" ng-model="vm.required" id="required" />
<br>
<label for="input">This input must be filled if `required` is true:</label>
<input type="text" ng-model="model" id="input" name="input" ng-required="vm.required" />
<br>
<p>required status: {{vm.required}}</p>
<p>form error: {{vm.form.input.$error}}</p>
</form>
</body>
</html>
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
I can clear a whole set of inputs but the thing is, it only clears when its value is valid. When it's not it does not clear anymore.
Something has to be added and I can do it via manually using an each loop. However I am looking to avoid this solution and something like a lesser code, so maybe someone has already come up with a solution. My current code is:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName" id="firstName" minlength="5"><span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName" id="lastName" minlength="5"><span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code" minlength="3"> <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>
Just use ng-model-options with allowInvalid flag:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.input = {};
$scope.clear = function() {
$scope.input = {};
angular.forEach(angular.element("input"), function() {
_this = angular.element(key);
_this.val("");
});
};
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="principalManagementForm">
First Name:
<input type="text" ng-model="input.firstName" name="firstName"
id="firstName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span>
<br>Last Name:
<input type="text" ng-model="input.lastName" name="lastName"
id="lastName" minlength="5" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span>
<br>Code:
<input type="text" ng-model="input.code" name="code" id="code"
minlength="3" ng-model-options="{allowInvalid: true}">
<span ng-show="principalManagementForm.code.$invalid">Code not over 3</span>
<br>
<br>
<button ng-click="clear()">Clear</button>
{{ input }}
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form name="myForm" novalidate="novalidate" data-ng-app="myapp" data-ng-controller="myc">
<p>User Name:<br>
<input type="text" name="fname" ng-model="fname" data-ng-minlength="10" data-ng-required="true" placeholder="Enter name" class="myname">
</p>
<p>Email:<br>
<input type="text" name="mail" ng-click="click($event)" data-ng-model="mail" data-ng-required="true" class="mymail" placeholder="enter mail id"/>
</p>
<input type="submit" value="click" ng-click="click()" />
</form>
<script src="angularjs/angular.js"></script>
<script>
var app =angular.module("myapp",[]);
app.controller('myc',function($scope)
{
var fname=$scope.fname;
$scope.click = function()
{
console.log("name "+fname);
alert("name "+fname);
}
});
</script>
</body>
</html>
I want to get a value which is entered by the user and after that I want to display it in the browser.
I don't want to set the value using $scope inside the controller.
I tried many times but I was unsuccessful to do it.
Can anybody help me?
Just pass the ng-model in click handler function as a parameter.
<input type="text" name="mail" data-ng-model="mail" data-ng-required="true" class="mymail" placeholder="enter mail id"/>
<input type="submit" value="click" ng-click="click(mail)" />
Show the model value in alert as
$scope.click = function(mail)
{
console.log("mail "+mail);
alert("mail "+mail);
}