AngularJS defined attributes in XForms Input field

We are using Xforms along with angularJS scripts. Fields should have angularJS attributes. How can Orbeon output the input fields with user defined attibutes?

I tried to add the attributes directly to xforms like below,

                        <xf:input ref="instance('mdl')//path"
                        class="form-control Name" userdefinedAttributes="value" angularJSattributes="value">
                <xf:alert>Error message</xf:alert>
            </xf:input>

The "userdefinedAttributes" and "angularJSattributes" are not coming in the input field in the rendered HTML.

Hi Vedha,

If you add an attribute in the XHTML namespace, e.g. <xf:input xh:gaga="42">, you'll find that attribute copied on the top-level element created for that control. In the case of an xf:input, the HTML <input> will be inside a , so you'll have the gaga="42" on the . Is that something you'll be able to work with?

Also, may I ask what Angular does with those fields? (I'm asking as this might be something you can do with XForms instead.)

Alex

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

Thanks for answers. I think your answer will help. To explain my situation better. We have a big AngularJS existing application and we are going to start using XFORMS for few fields in the application. Right now it is in POC stage.

This requirement is  to have both XForms and AngularJS properties in the HTML.

Hi Vedha,

I am not sure if you have that information already, but it would be interesting to know, on case-by-case basis, what Orbeon Forms and Angular would each be used for on the same field. I think knowing about specific use cases would maybe help us devise a solution.

Alex

I need to hide/show one field based on the content of other field. Is this feasible in XForms? We are very new to XForms.

For explain clearly, If i select one value from a DROPDOWN field, then one more field should be displayed. If i select different value, then that newly shown field should be hidden. I can provide sample if you like.

Hi Vedha,

Yes, definitely. Just so I get some context, and can give you better pointers, are you writing the XForms "by hand", or using XForms?

Alex

I am writing XFORMS by hand for now. Can you give some sample for this Show and Hide feature?

Thanks a lot.

Hi Vedha,

Certainly. See this example, where the input field "spouse" shows only if users chose "married" as their marital status. That rule is defined in:

<xf:bind
    ref="/instance/spouse"
    relevant="/instance/marital-status = 'married'"/>

Here is how it looks when you switch back and forth between single and married:



And you can find the full source of this example:

https://gist.github.com/avernet/395029bff2531e178a81

I hope this helps,

Alex

Thank you. I understand it now and this is going to help me for sure.

Vedha, very good, and I'm glad this helped!

Alex

I tried the a sample after your suggestion to get the user defined attributes in the HTML output from orbeon, it seems not working,

my HTML namespace,

xmlns="http://www.w3.org/1999/xhtml"

XForms code,

  <xf:repeat nodeset="fruit" id="fruit-repeat">
                        <xf:group ref=".">
                                <xf:input data-ng-blur="sample();" ref="./name">
                                        <xf:label>Add fruit</xf:label>
                                </xf:input>

                        </xf:group>
                        </xf:repeat>

I expect the data-ng-blur attribute to show up in the outer element of HTML output for this Xforms code. But this is not coming,

Below is the HTML output,

<label class="xforms-label" for="xf-5≡xforms-input-1⊙1">Add fruit</label><input id="xf-5≡xforms-input-1⊙1" type="text" name="xf-5≡xforms-input-1⊙1" value="Apple" class="xforms-input-input">

Are you sure about the suggestion given?

Hi Vedha,

In XML, attributes without a prefix are not in the default namespace (unlike elements), but in no-namespace. So you need to use xh:data-ng-blur="sample();", and have an xmlns:xh="http://www.w3.org/1999/xhtml". (Yes namespaces in XML are complicated; no wonder they prefered to avoid them in HTML!)

Note that this should be in addition to xmlns="http://www.w3.org/1999/xhtml", and of course you can use a prefix other than "xh" if you'd like, even if prefer to stick to the "convention", to make the code clearer.

Alex

Works fine. Thanks for explaining in detail which makes is easy for understanding the response.

Hi Vedha, I am glad it is indeed working. The way namespaces work in XML is far from simple, and thank you for the update.

Alex