How can I escape @ under Razor page when working with JavaScript

Question

I'm learning AngularJS and came up with this issue:

<div ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
    <input type="text"
           ng-model="ctrl.user.username"
           ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/"
           ng-required="true"
           ng-minlength="4">
    <input type="password"
           ng-model="ctrl.user.password"
           ng-required="true">
    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
</form>

In the statement "ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/" I wanted to use '@' but I can not. I have tried @@ but it's also not working. It's giving me this error:

"[" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.

Demo : https://dotnetfiddle.net/bfICXk

are you really utilizing any viewModel on page?, if no then convert it to html page... — Pankaj Parkar, Mar 30 '15 at 05:47
possible duplicate of [Escape @ character in razor view engine](http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine) — JLRishe, Mar 30 '15 at 06:12

score 4 · Accepted Answer · answered Mar 30 '15 at 06:31

4

Another way would be:

ng-pattern="/^[A-Za-z0-9._%+-]+@("@")[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/"

answered Mar 30 '15 at 06:31

Mackan

6,200
2
25
45

score 1 · Answer 2 · answered Mar 30 '15 at 06:12

Either use double '@@' or declare a string variable assign the pattern and use. like this,

@{
   string tempstr = "/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/";
}
<div ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm">
    <input type="text"
           ng-model="ctrl.user.username"
           ng-pattern="@tempstr"
           ng-required="true"
           ng-minlength="4">
    <input type="password"
           ng-model="ctrl.user.password"
           ng-required="true">
    <input type="submit"
           value="Submit"
           ng-disabled="myForm.$invalid">
</form>

Hope it helps, thanks.

How can I escape @ under Razor page when working with JavaScript

2 Answers2