I'm very new to angular!! What i'm trying to do is get the form name from inside the associated controller or a reference to the form object from inside the controller.
<form name="someName" ng-controller="formController">
<label>Name:
<input type="text"/>
</label>
<input type="submit"/>
</form>
controller:
obApp.controller('formController',function($scope){
//this does NOT work - undefined - was expecting it to be "someName"
var q = $scope.formName;
//this exists - but can not use it since the
//name of the form can be whatever and i do not know beforehand what that name is
var name = $scope.someName.$name;
});
My problem is that i don't know how in the world to get the name of the actual form. A reference to it would be even better. Looked for about 5 hours and i can't seem to figure it out.
The problem translates to this: "How to get a reference to the form object form the associated controller?".
The thing is that you want to access the DOM element of the controller, you could do it like this:
obApp.controller('formController',function($scope, $element){
var name = $element.attr('name');
});
But that is considered a bad practice, you shouldn't be accessing the DOM element directly inside the controller, consider using a directive instead.
Related
I'm writing a few components for a form, these will be included (via Grails <g:include> tags) in multiple places (a registration page, and an account page). The way Angular works, I have to specify the form name in order to get a reference to a particular field. For example:
<form name="myForm">
<input ng-model="username"/>
{{myForm.username}} -- right here
</form>
In the example above, I must use myForm in order to access username. This will not work when using the same field in multiple forms, as the form name will change.
Is there a way to access the field relatively, or maybe figure out the enclosing form name and inject that?
You shouldn't have to reference your form's name. Just bind it to a property on your controller's $scope and you should be good to go. Doing it this way, you won't have to care what your form name is, only that the controller has the property you need.
<form ng-controller="yourController">
<input ng-model="username"/>
{{ username }}
</form>
angular.controller('yourController', ['$scope', function($scope){
$scope.username = 'keanu reeves';
}]);
Here's a code pen.
You have to use some sort of dynamic form name code. e.g.
<div ng-repeat="myForm in forms">
<form name="myForm{{$index}}">
<input ng-model="myForm.username"/>
{{myForm.username}} -- right here
</form>
</div>
Although it's difficult to solve your exact problem without example code. Create a plunker or codepen that we can analyze.
This can't be correct, perhaps my google has gone off the rails but for the life of me I can't find any documentation to return all $valid = true values using the FormController. Does this functionality exist? I'm trying to marshall information from a form and send it to my web service but I wan't to make it something sensible before doing so. Currently I'm looping through all the properties in the FormController for a given form and looking to see if it doesn't start with $, and $valid = true and pushing it into an array like so:
angular.forEach(form,function(data,key)
{
if(key.indexOf('$') === -1 && data.$valid)
{
var item[key] = data.$modelValue;
clean.push(item);
}
})
Real basic, but I'm totally stumped (and can't fully believe) that this doesn't exist already in the angular API somewhere. Am I missing something? I'm still learning a lot about angular and am getting the feeling that much isn't really documented but perhaps i'm missing something quite basic. Thanks for reading!
This is not what ngFormController is used for (for validation and custom directive scripting). If you need to collection form data to send to server all you need is do is to make use of ngModel directives:
<form novalidate ng-submit="saveUser()">
<input type="text" ng-model="user.name">
<input type="text" ng-model="user.email">
</form>
and in controller saveUser handler you can access form data like
$scope.saveUser = function() {
console.log($scope.user); // {name: "Thomas", email: "mann#ga.com"}
// use $scope.user data to send to server
};
You just need to use ng-model. Angular won't populate the model until the value in the form is valid, so you don't need to check $valid manually.
Ex:
<input type="text" ng-model="myData" ng-minlength="3" required>
{{myData}}
You'll see myData isn't populated until you've entered at least 3 characters.
I've a language table, a table with custom tablenames and a table with translations.
Now I want to insert a new table in all languages. In my Controller I asked for the number of elements in my language table and generate the view:
var countLanguages = function () {
vm.languages = configService.getGlobalLanguageList();
};
and the View:
<ul ng-repeat="language in vm.languages">
<h3>{{translations}}</h3>
<div>
<label for="EditLanguageLabel" ng-bind="language.label"></label>
<input type="text" ng-model="translations" id="EditLanguageLabel" required />
</div>
</ul>
But how can I get all fields and save the data in the translationtable with the id of the language and the id of the custom table?
It is not possible to get the $scope.translations in the Controller because every ng-repeat has ist own scope, right?
vm.save = function ()
{
var test = $scope.translations;
};
What is the right way to solve this Problem.
One possible solution could be to load an empty custom table object and add the language. I think there is surely be a better solution.
I assume you are wanting to change the label of the language. If so all you need to do is set the ng-model of the input to the language variable so:
<input type="text" ng-model="language.label" id="EditLanguageLabel" required />
this will bind the value of the input to the label of the language and anytime you call get the language.label field it will be the version in the input.
Also ng-repeat doesnt create its own scope anything u access inside of it that is not on the object you create when looping (ex: language.label) is going to be on the scope so you translations is really $scope.translations. If you want each individual language to have its own translations you will need to add the variable to the object array being returns and set the model to:
<input type="text" ng-model="language.translations " id="EditLanguageLabel" required />
the above code will populate a translations variable on the language object with the value in the input.
I am looking at using angular for a project at work but I have a question first. We have a single page application that's pretty intricate. We do have a basic model set up but some fields in the model are redundant. If I couldn't reduce the redundancy, what steps could I take in angular so that one form element changes two variables in the model?
I've put together a bare bones jsfiddle of what I'm hoping to do:
<div ng-app>
<input type="text" ng-model="yourName" placeholder="Enter a name here" /><br/>
<span>Hello {{yourName}}!</span><br/>
<span>Hello {{altName}}!</span>
</div>
How could I change this around so that the input would assign it's value to both yourName as well as altName? I've tried what I thought would be obvious such as comma or pipe delimiting the ng-model attribute to no avail. Is it possible?
You could set a $watch on the yourname-Variable within your controller and then change the altName in its callback. Should look like this:
$scope.$watch('yourName', function(){
$scope.altName = $scope.newName;
});
I have code that adds a form and gives it a name. This is the only way I have been able to get the validation working.
However when I look at the scope I don't seem to be able to see any reference to the form name. Can someone explain how this is added.
Does the <form .. element somehow dynamically create a form object or do I have to create an empty object first?
As explained by the documentation for the form directive:
If the name attribute is specified, the form controller is published onto the current scope under this name.
Therefore, you have access to a FormController object in your scope. That's why you can use it like any other variable, when you do something like that, for instance:
<input
type="submit"
value="Submit !"
ngDisabled="formName.$invalid"
/>