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!
Related
I have this following html code. I donot want the decimal point to be there in this input field.
can someone let me know how to achieve this.
<input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ng-model="params.data" />
Please, keep in mind that ngPattern is just used to validate the field in a form (formName.field.$error.pattern), it still allows you to type a decimal point or whatever even if your regex doesn't match.
You can do it using:
ngChange directive;
ngMask module (Always I need handle inputs with masks I use it).
I made this snippet showing both ways:
(function() {
"use strict";
angular
.module('app', ['ngMask'])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.params = {};
$scope.checkNumber = function() {
if ($scope.params.data) {
$scope.params.data = $scope.params.data.replace(/\D+/, '');
}
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="form" novalidate>
<label for="withoutMask">Input without mask: </label>
<input type="text" id="withoutMask" ng-model="params.data" ng-change="checkNumber()">
<hr>
<label for="mask">Input with mask: </label>
<input type="text" id="mask" mask="d" repeat="15" restrict="reject" limit="false" ng-model="otherInput">
</form>
</body>
</html>
I hope it helps!
this is my video
i put some spaces in front the # mark but the submit button doesn't disappear, why? That is still a wrong mistake value and i want the submit button disapear.
my code is like this
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
<form name='myForm' ng-controller='formctrl'>
<input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
<span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
<input type='submit' value='submit' ng-hide="!myForm.$valid"></input>
</form>
<script>
var app = angular.module('ctrljs', []);
app.controller('formctrl', function($scope, $http){
$scope.digits = {};
});
</script>
</body>
</html>
help me please, thank you.
The email is valid because angular will trim that whitespace for you. See the example below. If you type a space before example. You will see it become valid.
var app = angular.module('ctrljs', []);
app.controller('formctrl', function($scope, $http) {
$scope.email = " example#example.com";
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<body ng-app="ctrljs">
<form name='myForm' ng-controller='formctrl'>
<pre>{{email}}</pre>
<input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
<span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
<input type='submit' value='submit' ng-hide="!myForm.$valid">
</form>
</body>
Unfortunately there is no ng-trim for type="email" see the docs here:
https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
If you want to prevent the auto trimming from happening you have to monkey patch.
Also from the doc, the type=email input already has a built in validation using the regex in this file:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js
You don't need to provide your own unless you need stricter or looser validation.
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
Hi I have following situation
I have following html Wh
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="c.num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
On my controller I have
$scope.test=function() {
$scope.pId = $scope.num+1;
};
So that when 5 is entered in first box the second box should update 6. But it doesnt.
Please let me know how to fix it. Thanks
Here is the plunker for it
http://plnkr.co/edit/9QoMwsjUBl8CNAFgtYcj?p=preview
Working fiddle
I removed the ng-init, no need for it.
Referenced the right variable.
Changed input type to number (then no need to parseInt). Else you would get 5+1 = 51.
$scope.test=function() {
$scope.c.Id = $scope.c.num + 1;
};
Your updated plunker
Please check if the first ng-model is correct. I think you want this:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
By looking at your code, I am unsure what the object 'c' is or where it is instantiated. I also do not think you are using ng-init properly. In the documentation below, it suggests only using it in scopes that are otherwise unavailable in the angular context (e.g. ng-repeats).
What about changing your html to
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
and keeping your javascript the same.
Edit:
Angular documentation https://docs.angularjs.org/api/ng/directive/ngInit
ng-blur is the way to go here:
markup:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter value" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
controller
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.c = {};
$scope.test = function() {
$scope.pId = parseInt($scope.num) + 1;
};
});
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>