7

I have an angular form which was using angular's built-in validation successfully. Take the following markup for example:

<form name="numberForm" novalidate>
    <input type="text" required />
    <button type="submit">Submit</button>
</form>

When the browser loads, the input field renders like this (unnecessary attributes removed):

<input class="ng-pristine ng-invalid ng-invalid-required" />

If I were to enter a value in the input field, the markup turns into:

<input class="ng-dirty ng-valid ng-valid-required" />

All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.

Any ideas?

I tried creating a http://jsfiddle.net/ma44H/3/, but can't seem to figure out how to get it to work.

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
mellis481
  • 4,332
  • 12
  • 71
  • 118
  • Regrettably, I haven't had time to test them because of the intensity of my current project. While the built-in Angular UI mask may be OK for date and phone, it's unacceptable for currency because, using your example, you couldn't do $50.75. The number of digits needs to match which isn't reasonable. I haven't had a chance to try the other two suggestions, but given the time you have to answer my question, I'll mark your answer correct so you get the bounty. – mellis481 Jun 16 '14 at 00:22

1 Answers1

9

JQuery and Angular do not cooperate well

Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to accomplish this.

The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.

Alternative #1: Angular UI

Try Angular-UI. Set of tools every Angular Developer could use.

Whatever Mask you want to implement can be done with their ui-mask directive:

Want a Date Mask?

    <input type="text" ng-model="date" ui-mask="99/99/9999" />

Currency Mask?

    <input type="text" ng-model="currency" ui-mask="$99999999.99" />

Phone Mask?

    <input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />

:

See Fiddle

:

Alternative #2: Filters

Angular has built-in filters:

Currency:

$filter('currency')(amount, symbol)

Date:

$filter('date')(date, format)

Insist on using JQuery? Try the jQuery Passthrough directive from the angular-ui toolset. I haven't made use of this directive but it's an intriguing option:

To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

Use the directive name jq for namespacing inside uiJqConfig. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

Dave Alperovich
  • 32,320
  • 8
  • 79
  • 101
  • 1
    Angular UI's jQuery Passthrough FTW! It works perfectly. `"` (where `$scope.dateMask = '99/99/9999'` and ` – mellis481 Jun 16 '14 at 15:33