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>
Related
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>
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>
I need to check which input element has modified in update form.
<form name="utilizationForm" role="form" novalidate>
<div class="row" data-ng-repeat="i in [1,2,3,4]">
<div class="col-md-3">
<div asterick class="form-group" ng-class="{'form-group has-success': !error['resource_type'] && (submitted), 'form-group has-error': (error['resource_type']) && (submitted)}">
<label for="resourceType">Resource Type</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<select name="resourceType" id="resourceType" ng-model="data['resource_type' + i]" class="form-control" ng-required="true" >
<option ng-repeat="option in resourceTypeJson" value="{{option}}">{{option}}</option>
</select>
<span class="er-block" ng-show="utilizationForm.resourceType.$touched && utilizationForm.resourceType.$error.required">Please provide Resource type.</span>
<span ng-show="error.resource_type1" class="er-block">{{error.resource_type1}}</span>
</div>
</div>
<div class="col-md-3">
<label for="efforts">Efforts (in hours)</label>
<input type="hidden" name="id" id="id" class="form-control" ng-model="data['id' + i]" value="">
<input type="text" test-change name="efforts" id="efforts" class="form-control" ng-model="data['efforts' + i]" value="">
</div>
</div>
<div class="text-right" ng-class="{'col-md-6 mt25': showCompletion}">
<button class="btn btn-primary" ng-disabled="utilizationForm.$invalid" ng-click="addUtilizationReport()">{{buttonText}}</button>
</div>
</form>
Now when I click on update button I need to check which input element has modified in update form in controller. Please help.
If you put the input in a form with a name attribute and then give the input a name attribute, you can also access the input's $dirty property.
<div ng-controller="MyController">
<form name="myForm">
<input type="text" name="first" ng-model="firstName">
<input type="text" name="last" ng-model="lastName">
</form>
</div>
app.controller('MyController', function($scope) {
// Here you have access to the inputs' `$dirty` property
console.log($scope.myForm.first.$dirty);
console.log($scope.myForm.last.$dirty);
});
You can use $scope.myForm.$dirty to see if any fields have changed, and the $dirty property on each input's property on the form to see if that input has changed. You can even iterate over the myForm object (non-input-field objects have keys prefixed with a $):
angular.forEach($scope.myForm, function(value, key) {
if(key[0] == '$') return;
console.log(key, value.$dirty)
});
Here is simplest example of using $watch in controller:
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $location) {
$scope.$watch('abc', function(newVal,oldVal) {
if(oldVal != newVal){
alert("value changed!");
}
});
});
<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>
<div ng-app="myApp" ng-controller="appCtrl">
<input type="text" name="first" ng-model="abc">
</div>
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>
In my controller I update a textarea with $http. It works as expected. But now I would like to bind message1, and message2 to from model, how to do it ?
RESULT:
This is {{message1}} in 1st line
This is {{message2}} in last line
in CONTROLLER:
$scope.myTextArea = response.data;
in HTML:
<form name="myform">
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
Wrapping means that you need to place your code inside the built-in ng-controller directive in order to achieve anything.
Here is also a working copy at plunker.
<body ng-app="myApp">
<form name="myform" ng-controller="myController">
<!-- Place your "RESULT" inside the controller (myController) scope -->
This is {{message1}} in 1st line <br />
This is {{message2}} in last line
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
</body>
You mean that you want to put both messages to textarea? Then you need to use watch
$scope.$watchGroup(['message1', 'message2], function(newValues, oldValues, scope) {
$scope.myTextArea =
'This is '+message1+' in 1st line\r\n'+
'This is '+message2+' in last line'
});