We Keep Coding

How do I add autofocus to my spring form input?

<div>
<sf:input type="text" cssClass="xxsLen" id="field1" maxlength="3" path="Data.field1"/>
</div>
I have more but I want to add autofocus to the first one. How do I do it here? I tried adding auto focus at the end but it breaks my code. Also this is a .jsp file.

If your Spring version is remotely modern, you can add your own attributes. You need proper XHTML though, so try this:
<sf:input type="text" cssClass="xxsLen"
id="field1" maxlength="3" path="Data.field1" autofocus="autofocus" />

Angular ng-pattern causes binding to break

I've got a form:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input id="url" size="50" ng-model="config.ewsUrl" required ><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
When I add an ng-pattern attribute to the input it breaks the binding:
<div class="panel-group">
<label for="url" tooltip="Enter the Engine as a Web Service (EWS) URL the Empower Editor will use for PDF preview.">EWS URL</label>
<input ng-pattern="/^((ht|f)tp(s?)\\:\\/\\/)?[0-9a-zA-Z]([-.\\w]*[0-9a-zA-Z])*(:(0-9)*)*(\\/?)([a-zA-Z0-9\\-\\.\\?\\,\\:\\'\\/\\\\\\+=&%\\$#_]*)?$/" id="url" type="url" size="50" ng-model="config.ewsUrl" required><br/>
<label for="PreviewTimeout" tooltip="Specify how long the Empower Editor will wait for a response from the PDF preview.">Preview timeout (Seconds)</label>
<input id="PreviewTimeout" type="number" min="15" max="60" required ng-model="config.previewTimeout" style="width: 150px;">
</div>
If I remove the reg ex, it goes back to binding again. What could cause this?

It looks like you are trying to validate a url. You don't need to use a regular expression or the ng-pattern option for this. Instead just use the following:
<input type="url" id="url" type="url" size="50" ng-model="config.ewsUrl" required/>
That in mind, the real reason that you aren't getting model binding is probably because the regular expression is not validating the values entered (either because it is incorrect or it is not a valid regular expression). I put together a quick plunker demonstrating what happens with valid and invalid values (on a validated field).
See the plunker here.
EDIT - Version Using ng-pattern
If older browser support is important, you will probably still need to also use ng-pattern. In order to do this you need to make sure the regular expression is in the correct format (leading and trailing slash, but no "g"). For an example I pulled a regular expression for url's from here and implemented it in the following code:
<input id="url" type="url" size="50" ng-model="config.workingUrl2"
ng-pattern="/https?:\/\/(www\.)?[-a-zA-Z0-9#:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*)/"
required/>
See this working in the updated plunker! Best of luck!

Ui mask value not matching ng model

Hi I am using a ui mask to format a phone number in an input box. Problem is the ngmodel is not matching what I see on the screen. For example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx"class="form-control" data-ng-model="search.phone" maxlength="12" >
what i see on screen: 778-673-7892
ng-model value: 7786737892
How do I fix this?
Thanks

This is a little out-of-date, for those looking at the latest ui-mask (1.2, it may be in older versions as well), the official attribute that it's observing is "modelViewValue". Example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" ng-model="search.phone" model-view-value="true">
This will preserve your model value to include look of the mask.

I know this has been completed, but I don't know if it has been officially released yet. Try doing this:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" class="form-control" data-ng-model="search.phone" maxlength="12" ui-mask-use-viewvalue="true">
If it doesn't work, you can make the changes yourself, you just have to find the file the mask directive is in, and make the changes you see here

AngularJS - ng-model not working with bootstrap directives

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.
I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?
<form role='form' action='#/app/register_db' method='post'>
<h1><small><b>Sign Up Information<b></small></h1>
<br>
<input type='text' ng-model='num'>
<h1>{{num}}</h1>
<div class='row'>
<input type='text' ng-model='num2'>
<h1>{{num2}}</h1>
<div class='col-xs-5'>
<input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
</div>
</div>
...
...
I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.
I am using angularJS and Bootstrap CSS.
Thanks.

You should get the following error message in your browser's console:
[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">
As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

In javascript how do I refer to this.form.checkbox[5].checked?

I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...

Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked

It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.

Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">