UnworthyToast UnworthyToast - 4 months ago 19
AngularJS Question

ngMessages not working correctly with nested input

I have an input field that is nested within another

<div>
element, and I am trying to use ngMessages on that inside input field, but I can't seem to get it to validate correctly.

<div class="form-group" ng-model="object.idnumber" ng-hide="condition.userObjectsHidden">
<label class="form-control-label col-lg-12">ID Number</label>
<div class="col-lg-12">
<input type="text" name="idnumber" placeholder="111001111"
ng-model="user.idnumber"
ng-pattern="idpattern"
class="form-control input-lg"
required="required"></input>
<div ng-messages="idnumber.$error" ng-if="idnumber.$dirty">
<p ng-message="pattern">You are wrong!</p>
</div>
</div>
</div>


I'm not sure if it matters in terms of functionality where the
<div ng-messages...>
tag is, but I have also tried having it completely outside of this element with the same results. If I understand Angular and ngMessages correctly, I need to assign
ng-messages
to a directive--
$error
in this case--that I get to by dot-walking across
name
assignments. As far as I know, I have done this with
idnumber.$error
, although to be fair, I have also tried a more extensive dot-walk by using
kiosk-form.uin.$error
, where
kiosk-form
is the name of the entire form.

I have tried both
ng-message="pattern"
as well as
ng-message="required"
. Also, just for clarity,
idpattern
is defined in my Javascript file as a regex string. It is defined correctly.

Answer

Rename your form as kioskFormand then ng-messages ="kioskForm.idnumber.$error"