I just noticed that if i have a hyphen in the form name attribute or the input's name attribute, AngularJS validations don't work.
This doesn't work if i try to validate the fields
<form name="signup-form">
</form>
The below works perfectly
<form name="signupform">
</form>
Can someone please explain why AngularJs doesn't work in the first case? And if we were to have "-" work, how can we do that?
The problem is that the name you put into the name attribute is also the name for the JavaScript property under which the form is published on the scope (e.g. for using it inside your controller). An attribute name containing a hyphen is not valid JavaScript though. I'm pretty sure there is no way around it.
It can be done... when referencing the form in the controller you may do so using the array notation. e.g.
$scope['my-form']['my-input'];
When binding in the template you can also use array notation like so:
<div ng-if="this['my-form']['my-input'].$invalid">There is an error</div>
Related
What is the difference between ng-if and data-ng-if ?
They both seem to work in the same way, however i am not able to figure out the difference in them as not much material is available on data-ng-if.
Technically both are same, but while validating your page W3C validator without defining data- on your custom attribute it will get failed, because W3C validator doesn't know anything about your custom attribute, so you must have to explicitly define data- before your custom attribute and then W3C validator will pass your HTML
They are equivalent. The $compile service links them to the same directive.
From the Docs:
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
For more informaton, see
AngularJS Developer Guide - Directive Normalization
arbitary attribute
HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as
<div id="thediv" data-ng-if="conditino"></div>
Both are actually one and the same.
Both are directives to specify Conditions.
You can use ng-if or prefixing ng-if with data- or x- like data-ng-if or x-ng-if.
Angular allows prefixing to its directives with data- or x- just for Validation due to "HTML5 validator".
Validation means you won't get any Warnings in Problems tab of Eclipse or any IDE that you are using like "Undefined attribute name (ng-model) at Eclipse".
You can use data-ng- instead of ng- if you want to make your page HTML valid nothing more than that.
The only difference between these two terms is that data-ng-app or x-ng-app validates the HTML while the ng-app didn't.
Functionality remains the same.
I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.
Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle
I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).
I am confused as to why this code doesn't work. I have a controller I am called sidebar and this works:
<a href="{{sidebar.id}}" >
and now my backend programmer wants me to include the id in the url that I send info to and yet this will not work, how do I get the id number inside the url?
<input id="fileupload" type="file" name="files[]" multiple data-url="https://domain.com:9999/{{sidebar.id}}">
I am confused why one works not the other.
Well in the first case you should always use ng-href instead of href. In the second case it looks like you are programmatically submitting your form. Where is the data-url attribute used? The id should be appended to the url in the controller function that handles the form submission.
Strangely enough this works for me: Plunker
In HTML:
<input type="file" data-url="https://domain.com:9999/{{sidebar.id}}"/>
Controller:
$scope.sidebar = {
id : 'a'
};
Are you sure this is available on scope?
I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.
Most of these answers are simply saying makes template valid HTML, or HTML Validator Compliant, without explaining what THOSE terms mean, either.
I do not know for sure, but I'm guessing that these terms apply to HTML validation programs that scan your code for standards compliance - kind of like lint. They do not recognize ng-app as a valid attribute. They expect non default HTML attributes to be prefaced with
data-attribute_name_here.
So, the creators of AngularJS have created alternate names for their directives that include the data- in front of them so that HTML validator programs will "like" them.
None in terms of the runtime behavior, those are just different styles of naming directives as described here: http://docs.angularjs.org/guide/directive
Directives have camel cased names such as ngBind. The directive can be
invoked by translating the camel case name into snake case with these
special characters :, -, or _. Optionally the directive can be
prefixed with x-, or data- to make it HTML validator compliant. Here
is a list of some of the possible directive names: ng:bind, ng-bind,
ng_bind, x-ng-bind and data-ng-bind.
As you can see from reading this the data- can be used to make your HTML pass HTML validator tests/
You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>
In modern browsers there is no difference, but in older IEs, they won't work unless you declare an XML namespace defining it.
There is also a validation difference in that ng-app is not valid XHTML, and will cause your webpage to fail HTML validations. Angular allows you to prefix its directives with data- or x- to allow it to validate.
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
This will throw an error
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
This won't throw an error
<div data-ng-app="scope" data-ng-init="name='test'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" data-ng-model="name"></p>
<p data-ng-bind="name"></p>
</div>
The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same.
For more reference you can try w3Validator.
Absolutely there is no difference between the two, except that certain HTML5 validators will throw an error on a property like ng-app, but they don't throw an error for anything prefixed with data-, like data-ng-app. So using data- prefix with our angular directives is good.
Even you can make use angular directives in below mentioned ways
ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind
I'm having problems trying to send input fields values to a Jasper report. I know how to send parameters to a report but I always did this using the show.gsp view because it was quite simple to do something like this:
<g:jasperReport controller="liquidacionDeEstano" action="crearReporte" jasper="liquidacion_estano" format="PDF" name="ReporteLiquidacion${liquidacionDeEstanoInstance.lote}">
<input type="hidden" name="LIQ_SN_ID" value="${liquidacionDeEstanoInstance.id}" />
</g:jasperReport>
Where LIQ_SN_ID is a "static" parameter used by the report.
But now I want to fill some input fields and use this values as parameters. So, what I'm doing is to use some input fields out of the jasperReport tags and hidden fields inside the jasperReport tags. Then I copy the values from the input fields to the hidden fields using JavaScript.
To generate the report I'm just using SQL and the parameters passed are used for filtering.
This is my controller closure to create the report (I think I don't need anything else but the parameters):
def crearReporte = {
chain(controller:'jasper',action:'index',params:params)
}
This is the code in the GSP form to invoke the report:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
I checked that all the parameters are correct (hidden fields values) using Firebug and a Web Developer extension for Firefox but when I click the link to the report this error is produced:
Timestamp: 23/12/2013 07:20:00 p.m.
Error: TypeError: link.parentNode._format is undefined
Source File: http://localhost:8080/Liquidaciones/reporteLotesRecepcionados/create
Line: 660
Following the link to the error this automatic generated code is shown:
<script type="text/javascript">
function submit_reporterecepcionfechas(link) {
link.parentNode._format.value = link.title;
link.parentNode.submit();
return false;
}
</script>
I don't know what I'm doing wrong. In fact this is the first time I try to generate a report using values as parameters from input fields.
Please help me with this.
Thank you in advance.
I know this have been here for 11 months withuoth an answer so...
Jasper tags uses their own form and since html forbids to have nested forms:
Content model: Flow content, but with no form element descendants.
(HTML)
Jasper documentation says : "Note that the jasperReport tag should not be nested with a form element, as it uses a form element in its implementation, and nesting of forms is not allowed."
Finally I solved it but I'm not sure how I did it. Ok, here is what I did:
As you know, since Grails 2 (I think) there is a form.gsp used by the create.gsp and edit.gsp views. I was using just the create.gsp (and, in consequence, the form.gsp) view to have the input fields to obtain parameters to generate reports. Initially I located the code:
<g:jasperReport controller="reporteLotesRecepcionados" action="crearReporte" jasper="reporte_recepcion_fechas" format="PDF" name="ReportePorFechas">
<input type="hidden" id="ELEMENTO_1" name="ELEMENTO_1" />
<input type="hidden" id="ELEMENTO_CLASS_1" name="ELEMENTO_CLASS_1" />
<input type="hidden" id="FECHA_INICIAL_1" name="FECHA_INICIAL_1"/>
<input type="hidden" id="FECHA_FINAL_1" name="FECHA_FINAL_1"/>
<input type="hidden" id="ESTADO_LOTE_1" name="ESTADO_LOTE_1"/>
</g:jasperReport>
INSIDE the <g:form></g:form> tags. So, I tried, as an experiment, to copy the code to declare the input fields and the code to generate the report from form.gsp file to create.gsp, OUTSIDE the <g:form></g:form> tags (I'm not using the form.gsp file anymore). And that was all. It's working perfectly now.
As I told you I don't know how this problem has been solved. Maybe it is mandatory to have the tags outside any <g:form></g:form> tags...
...but why?
PD.: I created a domain class to have the form to enter the values that were going to be parameters. All of you must be thinking this was completely unnecessary and that having an ordinary HTML form was enough , well, I'm a Grails newbie, sorry.