AngularJS evaluate expression in "action" attribute - javascript

This afternoon I experienced a very strange behavior of AngularJS.
If an expression containing "//" is in "action" attribute of a form, then the angular gives interpolate error.
Please see the code below. If you run the code, the URL can be correctly displayed in all places except in "action" attribute.
<form
id="moodleform" target="my_iframe"
method="post" action="{{'http://www.someurl.com'}}"
style="{{'http://www.someurl.com'}}"
some-attr="{{'http://www.someurl.com'}}">
{{'http://www.someurl.com'}}
<input name="somefield" value="someValue"/>
<input type="submit" value="Submit">
Here is the Plunker that demonstrates this problem, if you inspect the form element, you can see the action attribute is empty and there is error in console saying $interpolate:interr
https://plnkr.co/edit/R2ypg6WWmro1WdrNy6mX?p=preview
Any idea, thank you all.

You need to use ng-action instead of just action attribute

I found the solution.
Here is the original stackoverflow post: Angular set form action based on variable in scope
basically, i need to use $sce service in my controller in order to have an url in "action" attribute.

Related

How do I find the JavaScript referenced by this button?

Here is the "submit" button in the form with no onclick attribute.
<div id="243c0bb6-584e-4d48-a8fa-4308cd632028" class="nike-unite-submit-button joinSubmit nike-unite-component blurred">
<input id="d7e56d05-36e1-42f7-922b-d2979375007a" type="button" value="CREATE ACCOUNT">
</div>
I am more confused about the <form> tags from the Nike website source:
<form id="nike-unite-joinForm" class="nike-unite-form" method="post"
action="javascript:;" onsubmit="return false;">
...
</form>
How do I find out what is happening when I actually click the button on the page?
Using mouse-click breakpoints in chrome dev tools gives me a plethora of JavaScript functions takes too long for me to parse through.
If there are attributes or listeners added to the ID (such as a link to a script), I could not find them after using "Command-F" on the different attributes of the form.
The only other clue which I am not sure how to purse is that method="post".
I understand that all websites are different, but my question is a general one:
How do I figure out what the script that is being run when I click on the form?
Thanks in advance.
Try this:
document.getElementById('nike-unite-joinForm').submit();
This is from w3schools.com:
https://www.w3schools.com/jsref/met_form_submit.asp
EDIT:
Ok, I tried it myself on the registration website and it didn't work. Experimenting a bit with it I noticed an apparently random id is assigned to the DOM-Elements.
But I've found a solution:
document.getElementsByClassName("nike-unite-submit-button joinSubmit nike-unite-component")[0].children[0].click();
This works because the div in which the submit button is has a unique set of classes. So I get the first (and only) Element with this classes, and apply .click() to the first child element
Perhaps you could try to change submit with click:
document.getElementById('nike-unite-joinForm').click()

Access ng-pattern in error message

I have an ng-repeat for a list of attributes and want to show error messages for each input. For a pattern error I also want to show the specific regex it has to match.
Can I access an input's pattern somehow? I know I could add an attribute containing the regex but I would like to know if there is an angular way somehow.
(This is an oversimplified example, the regexes can be different for different attributes)
<form name="form">
<div data-ng-repeat="(attributeName, attributeMetaData) in configuration.metaData">
<input data-ng-model="configuration[attributeName]" type="text" name="{{attributeName}}" data-ng-pattern="/^[0-9][0-9]:[0-9][0-9]$/">
<span data-ng-show="form[attributeName].$error.pattern && form[attributeName].$dirty">
Please check your input format [pattern should go here]
</span>
</div>
</form>
jsFiddle: http://jsfiddle.net/lisapfisterer/ndu2g0ev/
Based on your restriction that the model cannot be changed, I guess your best bet is to have a separate model containing just regexes

how to log element in angular?

I am working on an Angular application and i have a view who is containing an iframe (The purpose of that iframe is just to display a login form).
Like my attempt to submit the form manually was unsuccessful, i tried to log the formular to check if i am really able to reach it but i am confused about how to do that...
the form inside the iframe have name attribute myForm
<iframe id="myIframe" name="myIframe" src="someUrl.com">
<html>
...
<form name="myForm" class="form" action="myAction()" method="post" onsubmit="myStuffToDO()">
...
...
</form>
...
</html>
</iframe>
So the way that i am trying to log the form in my controller is like that:
var iframeForm = angular.element.find('myForm');
console.log(iframeForm);
the result in hte console is that:
[]
I am really confused about how to do that so any help would be really kind.
.find('myForm') would find <myForm> tags, not tags with an attribute with the "myForm" value. .find('[name="myForm"]') is what you are looking for, but it won't work with the built-in element implementation because .find, as stated in the docs, is "Limited to lookups by tag name".
That means you'll need to also include jQuery in your project. Then Angular will use it instead of its jqLite implementation and complex selectors will work.
You can access using form name withing scope like below:
console.log($scope.formName);
You can access all elements by their names inside formName object.
from the page you can access angular element by angular.element+jquery selector
eg : angular.element("[name='myForm']")

Why I can't access a form object inside a ngInclude on angularJS?

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

Assign a input value to variable on same page with Jquery

I am working with a api where i need to post a url from a form and get response. Everything is working well except one thing. I could not figure out how to get url posted in form input in to a variable for javascript. Take a look at following.
<form action="#" method="post">
<input type="text" class="url" name="url" />
<input type="submit" value="Analyse for Page Speed" value="submit" />
</form>
I use above form to get url and i want that url to be a value for the following variable
// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'your url here';
How to get this done?
Is this what you're looking for?
var URL_TO_GET_RESULTS_FOR = document.getElementsByName('url')[0].value;
getElementsByName returns an array with all elements having the name passed as parameter. Since I'm assuming you have only one element with name="url", I get the first position of the array and returns the value.
As #crush pointed out in the comments, this task alone probably does not merit the use of jQuery. So if you aren't already using it, this should probably not be the deciding factor. If you need a pure JS solution, go with #ClaudioRedi's answer.
However, I'm assuming you're already using jQuery, and are asking for a jQuery solution. So here it is:
var URL_TO_GET_RESULTS_FOR = $('form input[name="url"]').val();
This will get the value of an <input> with the name url within a <form> element.

Categories