We Keep Coding

Angular2 RC5 input pattern binding not working

I'm having trouble with regular expressions in Angular2 RC5. If I hard code the regex (like below), everything works perfectly.
<input type="text"
name="date"
class="form-control"
[(ngModel)]="date"
placeholder="e.g. 24/05/2016"
(change)="updateAvailability()"
pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
title="Date Format (DD/MM/YYYY)"
required />
However, the pattern is being build dynamically as part of the component, so when I try to bind to the pattern attribute (as below), the validation no longer works.
<input type="text"
name="date"
class="form-control"
[(ngModel)]="date"
placeholder="e.g. 24/05/2016"
(change)="updateAvailability()"
[pattern]="datePattern"
title="Date Format (DD/MM/YYYY)"
required />
I've tried using interpolation e.g.
pattern="{{ datePattern }}"
but that produces the exact same results.
When I look at the DOM using Developer Tools in the browser, everything appears to be correct, but Angular seems to be adding an ng-reflect-pattern (see below) attribute with the exact same value. I can't find any documentation on this anywhere, and not sure if this is related to the problem or not.
<input name="date"
title="Date Format (DD/MM/YYYY)"
class="form-control ng-untouched ng-pristine ng-invalid"
required=""
type="text"
placeholder="e.g. 24/05/2016"
pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
_ngcontent-abf-3=""
ng-reflect-name="date"
ng-reflect-pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
ng-reflect-model=""></input>
I can't understand why the pattern attribute can be identical in the DOM, but hard coding the pattern works, and binding to the component doesn't.
Any ideas would be greatly appreciated?
Cheers.

Passwords validation using jquery form validation jquery.form-validator.js

I am using following code where I need to match the passwords inside a form. It doesn't work on most of helps provided on here and other websites. I could have missed something that I am unable to trace. Please help me with this.
HTML
<form id="user_form" class='has-validation-callback'>
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation-confirm="confirmation" data-validation-help="Please give us some more information">
</form>
JavaScript
$.validate({
modules : 'security',
form : '#user_form',
onError : function() {
alert('Sorry! Please complete the form fields.');
}
});
Link to library
http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.19/jquery.form-validator.js

Please refer password confirmation
This validator can be used to validate that the values of two inputs are the same. The first input should have a name suffixed with _confirmation and the second should have the same name but without the suffix.
<input type="password" name="pass_confirmation" class="form-control" data-validation="length" data-validation-length="min6">
<input type="password" name="pass" id="pass" class="form-control" data-validation="confirmation" data-validation-help="Please give us some more information">
for the second input change attribute data-validation-confirm="confirmation" to data-validation="confirmation" it will work.
Working fiddle

Try using a newer version of the library as it seems there may be a bug.
I was using the same version you had listed and received the same error. https://github.com/victorjonsson/jQuery-Form-Validator/issues/479

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" />

passing javascript options in HTML

I am using ruby gem bootstrap-datepicker-rails in my Rails-4 application, to draw a form for taking from_date and till_date as input as following. The beauty of this code is no javascript is needed as that in encoded in this gem's code.
<div class=" input-daterange" id="datepicker" data-provide='datepicker'>
<label>From Date</label>
<input type="text" class="form-control" name="from_date" id="from_date">
<label>Till Date</label>
<input type="text" class="form-control" name="till_date" id="till_date">
</div>
By default it takes format as “mm/dd/yyyy”, I want to change it to “yyyy-dd-mm”, Is it possible to do this by passing this in html options only and not using any javascript for it. I tried following and some other permutations of these, but of-course they didn't work.
<div class=" input-daterange" id="datepicker" data-provide='datepicker' options='format:"yyyy-mm-dd"'>
<div class="row input-daterange" id="datepicker" data-provide='datepicker' format="yyyy-mm-dd" >
Please let me know if this is possible to do and how.

The docs suggest you do it like this:
<input class="datepicker" data-date-format="mm/dd/yyyy">
https://bootstrap-datepicker.readthedocs.org/en/latest/#configuration
Note that the attribute goes on the input element and is called data-date-format

I think you are missing the right name of the html attribute, try :
data-date-format="yyyy/mm/dd"
Source : documentation

Getting Search Keyboard on iPhone using PhoneGap

I have created a search field on a mobile app i am creating via PhoneGap. I've tried using with no luck. I also know that i could get around the visual aspect of the input field via CSS & Javascript, however how do i get the Keyboard to have a "SEARCH" button on the bottom right instead of it saying "RETURN"

Use
<form> ...
<input type="search" /> ...
</form>
The <form> is a must.
(See also http://groups.google.com/group/phonegap/browse_thread/thread/bca19709dbdf2e24/eb312d0607102395?lnk=raot)

The following are supported in mobile safari, and therefore PhoneGap since iPhone OS 3.1
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
Search is not supported as an input type, and would require considerable native work to make happen in PhoneGap.
See here for details: https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

Update:
The following input type works as expected:
There are some important things that you have to keep in mind:
It only works on iPhone OS 3.1 +
The input tag MUST be inside a tag.
Also, it is worth noting the following tags as well:
<!-- display a telephone keypad -->
<label for="tiTel">Telephone:</label>
<input type="tel" id="tiTel"/>
<br/>
<!-- display a URL keyboard -->
<label for="tiUrl">URL:</label>
<input type="url" id="tiUrl"/>
<br/>
<!-- display an email keyboard -->
<label for="tiEmail">Email:</label>
<input type="email" id="tiEmail"/>
<br/>
<!-- display a numeric keyboard -->
<label for="tiZip">Zip Code:</label>
<input type="text" pattern="[0-9]*" id="tiZip"/>
<br/>