I am trying to access the model of a form element that is using validation (e.g. ng-minlength).
It seems that the model is undefined until the validation passes.
Is this the intended behaviour? How can I access a non-valid model?
Example: http://jsfiddle.net/ybdssvt5/
<div ng-app="myapp">
<form name="myForm">
<input type="text" ng-minlength="5" ng-model="formData.email" required/>
<div>EMAIL length: {{ formData.email.length }}</div>
</form>
</div>
EMAIL length cannot be displayed until validation passes.
you can plug in a controller and assign a default value,
var app = angular.module('myapp', [])
.controller('appCtrl', function($scope){
$scope.form = {};
$scope.form.email = '';
});
This is a dirty way, but you can improvise from here easily.
Also you need to add ng-controller="appCtrl" to your ng-app div or form.
Related
Is it possible to have more than one ng-model on one input field ?
e.g:
<input ng-model="formData.glCode" ng-model="accNumber" ng-change="accNumber = editAccountNumber(accNumber)"/>
Because all inputs where I want to apply this have ng-model set already and I also need to edit model name ng-model="accNumber"
If you can't edit the input and you are trying to bind the model to the controller use the same model which already exist on the input:
<input ng-model="formData.glCode" ng-change="formData.glCode = editAccountNumber(formData.glCode)"/>
Possible duplicate:
How to bind 2 models to one input field in Angular?
No, ngModel wasn't supposed to do things like this, at this point it is better to start relocating the logic from the view. For this scenario you could make use of $watch and get the accNumber value in controller.
Working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.$watch('formData.glCode', function(){
console.log($scope.accNumber);
});
$scope.editAccountNumber = function(glCode) {
return glCode;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input type="text"
ng-model="formData.glCode"
ng-change="accNumber = editAccountNumber(formData.glCode)"/>
</div>
You can use this code: ng-model-options
<input ng-model="name" ng-model-options="{updateOn: 'blur'}">
for more detail you can try this link:
http://www.w3schools.com/angular/ng_ng-model-options.asp
I need to be able to see in the Angular controller if the datepicker is pristine or not. Tried all sorts of things including sending the pristine value in a method but cannot get this value. Below is the view code:
<form name="myForm">
<!-- Datepicker From -->
<div class="small-6 medium-5 large-2 columns" ng-if="vm.subViewActive">
<div class="input-group">
<input name="valuationDatePickerFrom" ng-model="name" type="text" class="datepicker" id="valuationDatePickerFrom" placeholder="DD/MM/YYYY" pikaday="vm.datePickerFrom" on-select="vm.selectStartDate(pikaday)" year-range="{{ vm.yearRange }}" >
<div class="input-group-addon">
<label for="valuationDatePickerFrom" class="postfix">
<i class="fa fa-calendar"></i> From
</label>
</div>
</div>
</div>
</form>
and then I also tried :
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
in my controller but cannot get the pristine value. Read lots of posts here but mainly to do with CSS classes and front-end control or setting the pristine state from the backend not getting or checking the pristine state.
Thanks anybody that can help.
You are using:
var isPristine = $scope.myForm.valuationDatePickerFrom.$pristine;
but your form's name is not myForm.
Change <input name="name"... <input name="valuationDatePickerFrom"...
Then you can use:
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
Also, the controller is getting called before the view is created, so no myForm exists at the time the controller runs. Try adding a $timeout like so:
$timeout(function() {
var isPristine = $scope.userForm.valuationDatePickerFrom.$pristine;
console.log(isPristine);
}, 100);
plunkr
The above solution only works on page load, but you need to know this value when the page is being used. Instead pass the value to the controller when an action happens:
<form name="myForm">
<input type="text" name="valuationDatePickerFrom" ng-model="valuationDatePicker" ng-blur="alerty(myForm.$pristine)">
</form>
.controller('MainController', function($scope) {
$scope.alerty = function(isPristine){
alert('isPristine: ' + isPristine);
};
https://plnkr.co/edit/f0EWvYmoXCn8UOH3QCfE?p=preview
Please see jsFiddle
In this simple example here I want to set the checkbox value to true or '1' using a controller. I also want to keep a variable called $scope.button within the controller that is tied to the checkbox using ng-model.
However I am unable to set the checkbox value to true or 1 using $scope.button = 1
<div ng-app="App">
<div ng-controller="MyCtrl">
<input ng-model="$scope.button" ng-true-value="1" ng-false-value="0" type="checkbox"/>
</div>
</div>
Angular code
var app = angular.module('App', [])
app.controller('MyCtrl', function($scope) {
$scope.button = 1;
});
Use this:
<div ng-app="App">
<div ng-controller="MyCtrl">
<input ng-model="button" type="checkbox"/>
<span ng-bind="button"></span>
</div>
</div>
I've removed $scope from the ng-model attribute as this doesn't belong there. It's already being bound to the scope.
Working fiddle: http://jsfiddle.net/4bdkkenp/3/
How'd I get the value to controller from a nested view? I'd like to mention that I have a recursive approach.
HTML
<textarea ng-model="inputValue" class="ng-valid ng-dirty ng-valid-parse ng-touched"></textarea>
Full HTML structure can be found here
Edit:
I want to get the value of the textarea in my controller. (e.g. $scope.inputValue ); currently getting undefined
see this jszfiddle
http://jsfiddle.net/7qbucc62/
<div ng-app="app">
<div ng-controller="firstController">
<textarea ng-model="inputValue"></textarea>
<textarea ng-model="inputValue"></textarea>
</div>
</div>
<script>
(function abc()
{
var app=angular.module("app",[]);
app.controller("firstController",function($scope)
{
$scope.inputValue="";
});
})();
</script>
I think this is what you are asking
you can use $scope.inputValue directly in your controller. It will provide you the value of textarea
How to get form by name in $scope?
Test example:
<div ng-controller="solod">
<form name="good_f">
<input type="text" name="super">
</form>
</div>
<script>
function solod($scope){
console.log($scope.good_f) //undefined
}
</script>
Is it possible?
Thank you
You usually don't want the controller to access the form like this, that's coupling the controller to the structure of the view too tightly. Instead, pass the form to the controller like this...
<div ng-controller="solod">
<form name="good_f" ng-submit="submit(good_f)">
<input type="text" name="super">
</form>
</div>
<script>
function solod($scope){
$scope.submit = function(theForm){
console.log(theForm)// not undefined
console.log($scope.good_f) // will exist now also
};
// do stuff in a watch
$scope.$watch("good_f", function(formVal){ console.log(formVal);});
}
</script>
Otherwise, if you just want to track the value of the text input, give it an ng-model
Edit:
On further research, $scope will have good_f as a property, just not when you're logging it in the constructor. You could set up a watch on good_f if you wanted, but I still think you should pass it in.
name (optional) string Name of the form. If specified, the form
controller will be published into related scope, under this name.
https://docs.angularjs.org/api/ng/directive/form
Another possible way is to use ng-form, this will help you to access the form via scope easily.
<div ng-controller="solod">
<ng-form name="good_f">
<input type="text" name="super">
</ng-form>
</div>
Script code in your controller:
EDIT:
As JeremyWeir mentioned, to solve your problem you can use $timeout service of angularjs
function solod($scope){
$timeout(function(){
console.log($scope.good_f);
});
}
Caution: Don't use this - seriously
Angular is not jQuery.
As par as your question is concerned you can use $element in your controller(if you are not concrete with the $scope usage for this use case) -
myApp.controller("myCtrl", function($scope, $element){
alert($element.find('form').attr('name'));
$scope.myFormName = $element.find('form').attr('name');
});
PLNKR DEMO