AngularJS multiple forms - how to submit forms by name? - javascript

I'm using Angular UI Bootstrap accordion with a form in each Accordion. How can I submit the form by the id or name of the form? In essence I have an click event bound to the accordion and I would like to pass the name of the form as a parameter somehow and then submit it?
thanks
http://plnkr.co/edit/GMJ8fTWqSw2STnG4V2Ri?p=preview

Instead of passing in the form's name or id, you should pass in the object that the form is bound to, or just dynamically pull it from the controller's $scope.
In angular it is considered bad form to have anything DOM related in your controller. By using the DOM in a controller it dramatically reduces the test-ability of the controller which is one of the key pillars that angular is built upon.
example:
<form ng-submit="handleSubmit(formData)">
<input ng-model="formData.field1"/>
<input ng-model="formData.field2"/>
</form>
Based upon your plnkr example to call the function defined in your form's rcSubmit attribute do this:
formElement.bind('submit', function () {
$parse(attributes.rcSubmit)();
});
The documentation for $parse states Converts Angular expression into a function which is exactly what you need in this case.

Related

Unable to get input field `value` assigned using javascript

I am using Laravel with Angular JS for forms. I got a text box in the form as below
<input type="text" name="removedSiblings" ng-model="form.removedSiblings"
id="div_removedSiblings" class="form-control">
Using Javascript I am assigning a value (a button click)
var elem = document.getElementById('div_removedSiblings');
elem.value = 'malai';
Got the below code inside the Controller PHP
$removedSiblings = \Input::get('removedSiblings');
logger($removedSiblings);
I always get null value for $removedSiblings variable whenever the field gets value using the javascript.
But, when I type a value manually inside the text box, then that value is printed inside the controller.
Whats wrong here?
The AngularJS framework does not watch the value property of <input> elements. It only updates the model after user input or an update from inside the framework.
Use the ng-click directive for the button:
<button ng-click="form.removedSiblings = 'malai'">
Click me
</button>
For more information, see
AngularJS ng-click Directive API Reference
It's is because of the usage of ng-model which uses two way binding.. Try to set the value on the controller scope variable which is form.removedSiblings.
hope this helps.

Binding a custom JavaScript control to AngularJS

I have a set of pure JavaScript controls that are initiated like this:
var myControl = new SVGColorPicker("name", "#rrggbb");
myControl.insert("tagIdValue");
or, alternatively, in html:
<div><script>myControl.draw()</script></div>
The controls have getValue() and setValue(value) methods, and they harbor a hidden html input element so that the values appear in the form submits.
I am looking for some guidance how to bind these controls to the AngularJS famework. Obviously, I'd create a custom directive for every type. But how to tie in the control value reading and updating so that the two-way binding works flawlessly, and I could also make use of the special AngularJS form functionality (states, validation, etc)

AngularJs - show validation message for custom form control

I have a custom form control (a directive which is not an input element) which implements ng-model (as suggested here) and it works fine. Validation is triggered on the form submit and the directive is made valid/invalid correctly.
The problem is how to display an error message. I tried like for normal form input fields:
ng-show="form.fieldName.$error.required"
but I cannot access field through name. form.fieldName is undefined.
Please make sure that you defined your form name inside of form tag. After that try to print formname.fieldname
Actually the problem was with transclusion. Once I fixed it element was normally accessible through the name.

Is it possible to chain an event handler programatically in a directive?

I've been trying to figure out a way to trigger the validation routines on an input element when a button is clicked in the same form. I've been looking at a few different ways of doing this. What seems to be the least convoluted is to create a directive that modifies an input button to fire the $validate method on the target form element. I've set this up without too much trouble but I've gotten blocked at how to modify the ngClick event handler so that it triggers the $validate while leaving the original HTML-defined ngClick intact.
I was attempting to use the directive template function to extract the original ngClick method and chain it to the new ngClick function defined in the directive. This started to turn into a mess quite quickly and I'm concerned about how brittle it might be.
Is there a way to intercept the ngClick handler in a directive and to still have the original functionality intact?
Alternately, I'm open to suggestions about how to fire the validation routines on the input field when the button is clicked with minimal involvement of the controller layer.
This is a classical example of an XY-question (if not a double-XY-question).
You don't need to "chain event handlers" (whatever you mean by that). Neither do you need to, I think, trigger the validation manually just because you are validating against external data.
Validation in Angular just runs - and it is not meant to be triggered other than by changing the data.
To add your own custom validator you need to create a directive (which it seems like you did). In that directive you probably need to specify what you are validating against, like an array of strings against which you want to check for duplicates.
Let's say, for simplicity, that you want to validate against another value in the ViewModel. Suppose, this how it would be used:
<input ng-model="bar">
<form name="form1">
<input ng-model="foo" not-equal-to="bar">
</form>
<span ng-show="form1.$error.notEqualTo">error: foo is equal to bar</span>
So, you need to create a directive notEqualTo that adds a validator to the ngModel.$validators pipeline. This directive also needs to $watch for changes to bar and re-set the validity:
app.directive("notEqualTo", function(){
return {
require: "ngModel",
scope: {
notEqualTo: "="
},
link: function(scope, element, attrs, ngModel){
// register "notEqualTo" validator
ngModel.$validators.notEqualTo = function(modelValue){
return validate(modelValue, scope.notEqualTo);
};
// rerun validation on changes to scope.notEqualTo
scope.$watch("notEqualTo", function(){
ngModel.$setValidity("notEqualTo",
validate(ngModel.$modelValue, scope.notEqualTo));
});
function validate(one, other){
return one !== other;
}
}
};
});
plunker

How to access form inputs in knockoutjs

I have such HTML:
<form data-bind="submit: mySubmit>
<input type="text" ...
And I want to access the input's value upon submit:
mySubmit = function() {
var textValue = ???;
alert(textValue);
}
How can I do that ? I am OK with giving a kind of ID to the text field, but I don't want this ID to be global (for example I may have several of these forms on one page).
If you are looking at it from a Knockout perspective, then you really want to have the value of your input represented in your view model. This would mean adding a data-bind="value: myValue" to your input. Then, you would access it from the view model in your mySubmit method.
Something like: http://jsfiddle.net/rniemeyer/sAyET
I would not recommend it, but the submit method is actually passed the form element in its first argument by Knockout (it really should be passed the current data and event, but currently it is the element).
So, you could do something like: http://jsfiddle.net/rniemeyer/sAyET/1/. Ideally, your view model should not have any references to the DOM/view in it, so I would not recommend this option, unless absolutely necessary.

Categories

Resources