I have created a simple form using angular js. When the user enter their details and submit it the values will be saved in console, but the values remains in the field even after clicking the submit button.
I want to save details of various fields in console for now and need to clear the fields once the submit button is clicked so that the next person details can be entered. all the user details will be saved in console for now so that we can retrive it later
View code:
<html lang="en" ng-app="person_info">
<head>
<meta charset="utf-8">
<title>Person info</title>
<script src="../angular.min.js"></script>
<script src="controller_class2.js"></script>
</head>
<body ng-controller="info">
<div class="forms">
Name: <input type="text" value="name" ng-model="person.name"> </br></br>
First Name : <input type="text" value="fname" ng-model="person.firstname"></br></br>
Phone Number : <input type="text" value="number" ng-model="person.number"></br></br>
Email : <input type="email" value="email" ng-model="person.email"></br></br>
Address : <input type="text" value="address" ng-model="person.address"></br></br>
<input type="submit" value="submit" name="submit" ng-click="test()">
</div>
<p>Name : {{person.name}}</p>
<p>{{person.firstname}}</p>
<p>{{person.number}}</p>
<p>{{person.email}}</p>
<p>{{person.address}}</p>
{{ person | json }}
Controller code :
var person_info = angular.module('person_info', []);
person_info.controller('info', function($scope) {
$scope.test = function () {
console.log($scope.person);
}
});
Here is PLUNKER of your code...
you should use ng-click instead onClick...
You could set a property on the model to the saved person and reference this object underneath the form:
Controller:
$scope.test = function(){
// do whatever needs to be done to save the person
$scope.savedPerson = $scope.person;
}
View:
<p>Saved person {{savedPerson.name}}</p>
Related
I have an input field in form that I dont want to send. Even though i removed the name on input field it stills get sent probably due to angular magic.
To prevent this I thought if I could remove this item from post request it'd be the solution.
<input type='radio' ng-model='birthday' ng-value='true'>
when form submits POST has field called birthday despite input not having a name attribute. So how do i prevent it from showing up.
Form is html template, and controller is called on ng-submit
I think that you may be looking for the disabled property:
<input type='radio' ng-model='birthday' ng-value='true' disabled="true">
Edited
Here is an example of how you could use the disabled property for not sending undesired information with the form on submit:
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var TestApp = angular.module("TestApp", []);
TestApp.controller('TestCtrl', function($scope) {
$scope.needsBirthdayDisabled = false;
$scope.needsBirthday = false;
$scope.sendForm = function(form) {
$scope.needsBirthdayDisabled = true; //if you comment this line, the "yep"'s input value will be sent with the form
form.$submitted = true;
};
});
</script>
<div ng-app="TestApp" ng-controller="TestCtrl">
<!-- the method is set to GET for test purpose (so we can easily see the sent values on the URL) -->
<form action="" method="GET" name="myForm" ng-submit="sendForm(this)">
<div>
<label for="name">Name</label>
<input type="text" name="name" ng-model="name"/>
</div>
<div ng-show="needsBirthday">
<label for="birthday">Birthday</label>
<input type="text" name="birthday" ng-model="birthday"/>
</div>
<div>
<label>Needs Birthday</label>
Yep <input type='radio' name="yep" ng-model='needsBirthday' ng-value='true' ng-disabled="needsBirthdayDisabled">
</div>
<input type="submit" value="Go!"/>
</form>
</div>
</body>
</html>
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 have a variable set on $scope $scope.some_val that I want to update on form submission depending on whether a checkbox is checked or not.
I want to hold on to the original value some_val but only update it when user clicks submit.
I tried:
ng-model="some_model.some_val" ng-true-value="new_val" ng-false-value="{{ some_model.some_val }}"
Because I want the original value preserved but this didn't work.
How can I do this?
It seems that Angular does not accept non-constant expressions in the ng-true-value and ng-false-value attributes, as stated in this doc.
What I would invite you to try is to simply hardcode the default value in a regular JavaScript variable, in the controller behind the form. On user submit, just check if the checkbox has been checked and if so - update the value. If not - reassign it to the hardcoded JS var.
Below is the working code and here is a plunker.
// Code goes here
var app = angular.module('app', []);
app.controller('controller', function($scope){
var origin_value = 'original value';
$scope.some_val = origin_value;
$scope.submit = function(input){
if(input.checkbox)
$scope.some_val = input.text;
else
$scope.some_val = origin_value;
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
<code>{{some_val}}</code>
<form novalidate>
<input ng-model="input.text" name="input" type="text" /><br/>
Update some_val? <input type="checkbox" value="checked" ng-model="input.checkbox" name="checkbox" required="" /><br/>
<input type="submit" ng-click="submit(input)" value="save"/>
</form>
</body>
</html>
Thank you and have a nice day!
I was trying to check whenever my form is being edited by writing some fields of it. I read $dirty should work for that task but I can't figure out what I'm missing here:
<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form name = "myForm" novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p> is Form dirty? {{isDirty}}<p>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.isDirty = $scope.myForm.$dirty;
});
</script>
</body>
</html>
I'm trying to make the flag isDirty to true whenever the user modifies the form. Thanks
You are missing name attributes in your form fields which are not enabling form validation for those field. You need to add unique name for each field so that it will get add those field in myForm object
Markup
<form name="myForm" novalidate>
First Name:<br>
<input type="text" name="firstName" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" name="lastName" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
Also you are accessing myForm object which is nothing but form object, I won't be available until DOM get rendered, $scope.myForm will be simply undefined at the time of controller initilization, If you really want to access $scope.myForm from controller then you need to put that code in $timeout that will run $timeout function code in next digest cycle.
$timeout(function(){
$scope.isDirty = $scope.myForm.$dirty;
});
Update
There is no need to maintain a separate isDirty flag (this would require to change the separate isDirty flag to reflect any changes in myForm.$dirty flag.) Instead I suggest you use $scope.myForm.$dirty directly as a flag. So use the expression myForm.$dirty, and this flag will change as form gets dirty.
Working Plunkr
I have the following code written in angular JS
<html lang="en" ng-app="person_info">
<head>
<meta charset="utf-8">
<title>Person info</title>
<script src="../angular.min.js"></script>
<script src="controller_class2.js"></script>
<style type="text/css">
.forms{width:200px;height:300px;padding:75px;float:left;background:#CCC;}
.deatils{width:200px;height:auto;padding:100px;float:left;background:#CCC;margin- left:10px;}
.fields {background:#999999;float: left;height:120px;padding: 20px;width:260px;}
</style>
</head>
<body ng-controller="info">
<div class="forms"> Name:</br>
<input type="text" value="name" ng-model="person.name">
</br>
</br>
First Name :</br>
<input type="text" value="fname" ng-model="person.firstname">
</br>
</br>
Phone Number :</br>
<input type="number" value="number" ng-model="person.number">
</br>
</br>
Email :</br>
<input type="email" value="email" ng-model="person.email">
</br>
</br>
Address :</br>
<input type="text" value="address" ng-model="person.address">
</br>
</br>
<input type="submit" value="submit" name="submit" ng-click="test()">
</div>
<div class="deatils">
<p>Name : {{person.name}}</p>
<p>First Name : {{person.firstname}}</p>
<p>Phone Number: {{person.number}}</p>
<p>Email : {{person.email}}</p>
<p>Address :{{person.address}}</p></br></br>
<p>Details in json format : </br>{{ person | json }}
</div>
<div class="fields">
Submit the persons serial number to display his details
</br>
</br>
<input type="number" >
</br>
</br>
<input type="submit" value="submit number">
</div>
</body>
</html>
Controller code
var person_info = angular.module('person_info', []);
person_info.controller('info', function($scope) {
$scope.test = function () {
console.log($scope.person);
}
});
When the user fills the form and click on submit button i want the details to be saved into a array and clear all the field so that the next users details can be filled. each user details will be stored in the array.
i have also created a text field where user can enter the serial number of the user whose detail have to be displayed. for example when i enter the value 3 and submit this. the 3rd person's details in the array have to be displayed.
you can define a function like your test() function in your controller to save current model into an array and clear it, here is example function,
$scope.savePerson = function () {
$scope.personList.push($scope.person);
//clear person model/form
$scope.person = {};
};
and here is html form,
<div class="forms">
Name: <input type="text" value="name" ng-model="person.name">
First Name : <input type="text" value="fname" ng-model="person.firstname">
Phone Number : <input type="number" value="number" ng-model="person.number">
Email : <input type="email" value="email" ng-model="person.email">
Address : <input type="text" value="address" ng-model="person.address">
<input type="submit" ng-click="savePerson()">
</div>
and define another function to retrieve data from your personList[] array like this,
$scope.getPerson = function (index) {
//selected person details
$scope.personDetail = $scope.personList[index];
};
of course you shoudl make few changes in your html as well, here is full PLUNKER of my solution...
you can try extracting the value using .serialize() like this
var count=0;
var formArr={};
$('.forms input[type=submit]').on('click',function () {
formArr[count++]=$( "form" ).serialize(); //this would serialize the form data
// clear the form data for next client details entry
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
$('.fields input[type=submit]').on('click',function () {
var serNo=$(this).find ('input[type=text]').val();
var formData= formArr[serNo];
formData=formData.split("&");
for(i=0;i<formData.length;i++)
{
$('input[name='+ formData[i]+']').val(formData[++i]);
}
});
Note: this is untested code, it may require few code tunings
Happy Coding :)