Ionic-app-scripts: Bug - escaped regex in form pattern validation handled differently ionic serve vs ionic build

[mhartington]

_From @alexbainbridge on December 9, 2016 0:25_

Ionic version: (check one with "x")
[ ] 1.x
[*] 2.x

I'm submitting a ... (check one with "x")
[ *] bug report
[ ] feature request

Current behavior:
There are various approaches for forms and form validation in Ionic 2 / Angular 2. Most approaches support use of html 5 pattern in the form, for simple validation

However ionic build and ionic serve handle the pattern in different ways, when something needs escaping

Take this example of a simple validation accepting http or https web addresses (and S which relates to whitespace)

pattern="https?://[\S]+"           works ionic build
pattern="https?://[\\S]+"          works ionic serve

Note the 2nd slash required on ionic serve
Ionic build regex is the generally recognised one, single slash.

Expected behavior:

I expect both ionic serve and ionic build to handle escaped characters the same way, so the same template works regardless of whether serve or build used.

I don't mind if "same way" is defined as requiring escaped slashes (as in ionic serve) or without (as in ionic build) - but the same template approach should work for both.

However, if there is a choice here, ionic build is right, ionic serve needs fixing....

Related code:

Example form field

<ion-input 
  [class.error]="!website.valid"
   #website="ngModel"  
  pattern="https?://[\S]+" name="website" 
  [(ngModel)]="supplier.website" 
  type="text" 
  maxlength="2000">
</ion-input>

Other information:

Pretty sure Ionic serve (now with double slashes) was just single slash in beta 11 era, as I have a recent commit going through adding them to make it work ionic serve.... (only to subsequently find it stopped it working in ionic build!)

Not using any custom config etc - its app scripts plain as it comes

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: 5.0.11 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

_Copied from original issue: driftyco/ionic#9561_

[alexbainbridge]

Just to update this

Since 0.47

--prod needs single escaping
development mode (regular ionic serve) needs double escaping

Rather than it being a serve / build difference now

Alex

[alexbainbridge]

To update this I previously noted

pattern="https?://[\S]+"           works --prod
pattern="https?://[\\S]+"          works ionic serve

Turns out with a 3rd backslash (well 2 and the character) works both --prod AND ionic serve

pattern="https?://[\\\S]+"           works --prod & ionic serve

I would make this more of a documentation fix now (perhaps in form validation section) rather than a code fix @mhartington

https://ionicframework.com/docs/v2/resources/forms/

[danbucholtz]

Use Typescript API to grab the data instead of regex.

Thanks,
Dan

[alexbainbridge]

This is now fixed in v3 CLI so you can close.

Just a single escape now works both --prod and ionic serve (i.e. non --prod)

I can't close it as this is a copy of my issue @mhartington

Thanks!

[danbucholtz]

@alexbainbridge, w00t!

Thanks,
Dan

[DaniSchenk]

I still have problems with this issue and created a repo to reproduce: