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
Related
here is the code, i am trying to use two ngChanges, is it correct or any alternative way.
<select ng-change="updatedate()" ng-change="checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
Thanks,
Jameer
Call both the methods in single ng-change like this.
<select ng-change="updatedate(); checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options> </select>
Don't use 2 ng-change. Just seperate the functions with a ;
ng-change="updatedate(); checkDate();"
use multiple operations in one ng-change and separate them by ; like
ng-change="updatedate();checkDate();"
<select ng-change="updatedate();checkDate();" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
There is no code error if we call two ng-change in same element like you configured :
<select ng-change="updatedate()" ng-change="checkDate()" class="form-control" name="anniversaryMonth" ng-model="anniversaryMonth" month-options>
</select>
The problem is only it will not solve your purpose I mean you want to execute both function updatedate() checkDate() on change. It will only call first function you configured.
Now if you want to execute both function you will need to call both function with ';' separated in same ng-change.
You can check the difference in running example.
<!DOCTYPE html>
<html>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Write something in the input field:</p>
<input type="text" ng-change="myFunc()" ng-change="myFunc1()" ng-model="myValue" />
<p>two ng-change called for two function. value of count is {{count}} times.</p>
</div>
<div ng-controller="myCtrl">
<input type="text" ng-change="myFunc();myFunc1()" ng-model="myValue" />
<p>Two function call in one ng-change. value of count is {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
console.log('inc'+$scope.count);
};
$scope.myFunc1 = function() {
$scope.count--;
console.log('dec'+$scope.count);
};
}]);
</script>
</body>
</html>
We are new to angular and we wanted to use angular validations with our forms. We are using async ajax calls with a kendo grid to get, create, edit and save data without any submit. I am having a hard time figuring out how to reset the validation state of the form when the user chooses to create a new record.
I made this small exaple, trying anything I could find in sof without any luck so far:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<div ng-app="app">
<div ng-controller="ValidationController">
<form name="myForm" novalidate>
<label>
Name
<input name="nombre"
ng-model="field"
required />
</label>
<div ng-messages="myForm.$error">
<div ng-message="required" ng-if="myForm.nombre.$touched" ng-messages-include="myMessages">
</div>
</div>
<button type="button" ng-click="reset(myForm);" value="Reset">reset validation</button>
</form>
<script type="text/ng-template" id="myMessages">
<div ng-message="required">required field</div>
</script>
</div>
</div>
<script>
angular.module('app', ['ngMessages']).controller("ValidationController", function ($scope, $window) {
$scope.reset = function (form) {
form.$setPristine();
form.$setUntouched();
form.$setValidity();
form.nombre.$setPristine();
form.nombre.$setValidity();
form.nombre.$setUntouched();
}
});
</script>
Here is my fiddle:
https://jsfiddle.net/yh9q1a2j/
Update:
I think this better suits your needs. I've updated the fiddle
https://jsfiddle.net/n7qqn1x6/6/
In your reset method call $setPristine along with clearing the formData object.
$scope.formData = {};
$scope.myForm.$setPristine();
To get the error messages to be removed from the page once added I had to use ng-show instead of ng-if
<div ng-show="myForm.nombre.$error.required&&myForm.nombre.$dirty">required</div>
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/
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.
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