I am trying to obtain form data from the Angular controller without success.
HTML:
<form>
<input type="text" id="entityName" ng-model="ent.Name">
<button class="btn" type="button" onclick="this.blur()" ng-click="$event.preventDefault(); saveData()">Save</button>
</form>`
JS Controller:
$scope.saveData = function() {
console.log($scope.ent.Name);
}
I receive error: Error: $scope.ent is undefined
always give form a name if you want angular validation to work. Shouldn't use onclick in angular app (asking for headaches and creating testing problems) ng-clcik will automatically prevent default so you don't need to add that yourself.
You probably haven't set up an object in scope for ent. If your ng-model values didn't have a dot in them you wouldn't need to register anything in scope for ng-model to work automatically creating a scope property
$scope.ent={};
This will be object that your ng-model properties will bind to. Will need to see more code if this isn't the issue
Related
As a new "Angularian", I have this:
<div data-ng-app="" data-ng-init="">
<input type="text" ng-model="hello">
<p>{{hello}}</p>
</div>
But I wonder, how can I console.log whatever I type in the expression (ng-model)?
(e.g. if I type "Soylent Green is people" in the text field I want to see it in Chrome's Inspector window)
You can use console.log($scope.hello); inside your controller.
I suggest you to take a look about Addons/Extensions like Batarang and
ng-inspector.
This is the newest one, and as the name suggests, it allows you to inspect your application's scopes.
Use ng-change directive with your input tag like
<input type="text" ng-model="hello" ng-change="textChange()" >
and in your controller
$scope.textChange = function () {
console.log($scope.hello);
}
https://jsfiddle.net/walioulislam/wpjwavrc/
You have a controller for this app, if you don't know about controllers you can read the documentation in w3schools
You can do console.log($scope.hello) inside your controller
By default each and every variable you define in HTML is inside $scope object
I am building a dynamic form that could include any number of field combinations and field types. A typical example of this might be a user registration with firstName, lastName, email and password. However also to be included on some forms would be a boolean checkbox for a field like active.
I have an empty object in my controller that will be populated by the form and then submitted. I attach ng-modelto all of the form elements as usual, these all work well until I get to the boolean field which does not get included in the model unless the user has interacted with it.
The boolean field is usually required at the server side so I want it to be checked by default, but this won't be added to the model unless you first uncheck it and check it again.
$scope.formData = {}
<div class="{{field.name}}">
<label for={{field.name}} class="field-label">{{field.prettyName}}</label>
<input
type="checkbox"
class="form-field boolean-checkbox"
id={{field.name}}
ng-model="formData[field.name]"
ng-checked="true"
/>
</div>
So the scenarios are:
Initial page load checkbox is checked but object reads as:
{}
The user then has to uncheck the checkbox, and then recheck it and the object will read as:
{
"active":true
}
I have also tried using ng-init="true" but no joy there.
I'm not sure why ngInit didn't work for you, but here's an example using it, as luk492 stated in its comment (you need to check your console logs to see it working):
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope',
function($scope) {
$scope.formData = {};
$scope.$watch(function() {
console.log('formData', JSON.stringify($scope.formData, null, 4))
});
}
]);
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input type="checkbox" ng-init="formData.truthyValue = true" ng-model="formData.truthyValue">
<input type="checkbox" ng-init="formData.falsyValue = false" ng-model="formData.falsyValue">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
You'll see that both truthyValue and falsyValue are added to formData regardless of their boolean value.
An important thing to note from ngChecked docs is that you shouldn't use it together with ngModel, as this can lead to unexpected behavior.
If your form has the named Option ng-checked="true" at the start, then you could use a "constant" on the back-end. So if the form returned following data:
{ NULL }
then you could use your constant instead, because the form is on true.
And if the user changed the Option, you could use the form-value instead
{
"active":true
}
If you got any further question, don't hestitate to comment my answer. :)
I have a screen built with a several stacks of ng-includes. The last one, in special, I build the screen based on user configuration.
Sometimes, I have to show a Form in one of this included templates. And when my user click on save button, I have to validate if all fields in the form are valid.
In the meantime, when a try to access form object, to check for $valid, my form is undefined.
After a day fighting against it, I've discovered that ng-include process is not accepting my form object to be created.
I've created this plunker to see if it's really happening on a simple project, making a working form and not working one:
http://plnkr.co/edit/4oMZYLgaYHJPoSZdSctI?p=preview
Basically, created a form, like this, with demanded angular attributes:
<form name="sampleForm">
<input type="text" name="aws" required ng-model="myValue">
<br/>myValue: "{{ myValue }}"
<br/>
<input type="text" name="aws" required ng-model="myValue">
<br/>myValue: "{{ myValue }}"
</form>
And trying to access form object like this:
$scope.sampleForm.aws.$valid
And the result is:
$scope.sampleForm === undefined
Someone know how to solve this problem?
Since ng-include creates a new scope, $scope.sampleForm will be undefined from within the included page.
The solution should be getting the ng-controller="formController" declaration inside of the included HTML page itself, which I think is also a better design, since I can't see a scenario where it's not "controlling" the form.
The other non-included form obviously works as you might expect.
Plunker
I read a lot of resources about Blaze allowing reactive rendering for Meteor 0.8, but I can't seem to find a solution for my simple problem below.
I'm trying to validate my form inputs. For the sake of simplicity, lets say that I just want to change my {{message}} when a form is submitted. The approach I have taken in client.js is simply giving a new value to the helper variable. This is the way how I used to work with AngularJS, but there seems to be more than simply changing the variable in Meteor. How would I go about this?
- index.html
<template name="user">
<form>
<input type="text" id="name">
<p>{{message}}</p>
<button class="submit" onclick="return false;">Submit</button>
</form>
</template>
- client.js
Template.user.message = "";
Template.user.events = {
'click .submit' = function(){
Template.user.message = "valid";
}
}
It should work if you use a reactive variable. I'll use a session variable in this example:
Template.user.message = function() {
return Session.get('userMessage');
};
Template.user.events({
submit: function() {
Session.set('userMessage', 'valid');
}
});
Note that events takes an object (your code is assigning the click handler rather than making a value in an event map).
I am using the following way to use $scope variable ({{func}}() in this case) as function name in ng-click.
<button type="button" ng-click="{{func}}()">Call {{func}}</button></pre>
This works in angularjs-1.2.0rc3. See working plunkr here
Any future version from > 1.2.0rc3 throw this error
What's changed? How can I use the above syntax in current angular version?
Ok first of all I do not recommend such a usage for ng-click because angularjs itself do not support this, but if you still want to use it such a way here is your solution...
<button type="button" ng-click="$eval(functionName)()">...</button>
where
$scope.f1 = function() {
...
};
//name of function as a string
$scope.functionName = "f1";
this is what your are looking for and here is your PLUNKER example...
All I did was append scope to both variables
<form name="angular" ng-controller="Ctrl">
<button type="button" ng-click="{{scope.func}}()">
Call {{func}}
</button>
<label>Status: {{scope.status}}</label>
http://jsfiddle.net/bebold/TmKLY/1/
I wouldn't advise going this route for dynamic variable change, a better choice would be to create a directive and do the binding within the template:
A great explanation can be found HERE.