0

Using a form input directive with ng-pattern. It works (i.e. error is displayed) when the ID on the directive is a string, but fails (i.e. error never displayed) when the ID is an expression. Pseudo code:

works

<form name="myForm" role="form" ng-submit="customer.submit()">
  <form-input id="foo" ng-pattern="/^[0-9]+$/"></form-input>
</form>
<span ng-show="myForm.foo.$error.pattern" class="ng-hide">Not valid number!</span>

doesn't work (myVar = "foo")

<form name="myForm" role="form" ng-submit="customer.submit()">
  <form-input id="{{myVar}}" ng-pattern="/^[0-9]+$/"></form-input>
</form>
<span ng-show="myForm.foo.$error.pattern" class="ng-hide">Not valid number!</span>

Chrome Inspected HTML (exactly same for working/not working)

<input type="text" id="foo" name="foo" ng-pattern="/^[0-9]+$/" class="ng-valid ng-valid-pattern">
<span ng-show="myForm.foo.$error.pattern" class="ng-hide">Not valid number!</span>

Assume this is because the expression ID is undefined when everything is wired up, but no idea how to fix. Thanks in advance!

user1508460
  • 83
  • 5

1 Answers1

0

You need a model for the validation, ng-model directive to be precise. When ng-model is added, everything works. 

<form name="myForm" role="form" >
    <input name="foo" id="{{myVar}}" ng-pattern="/^[0-9]+$/" ng-model="modelVar" />
</form>

See jsFiddle

MiTa
  • 1,340
  • 11
  • 12
  • Hi, added the model but when I change myVar to 'foo' and use name={{myVar}} it stops working in [jsFiddle](http://jsfiddle.net/qtokL2tv/1/). Thanks. – user1508460 Jan 19 '15 at 01:05