ngMessages not working correctly with nested input

Question

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.

Shintu Joseph · Accepted Answer · 2016-07-18 14:03:54Z

1

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

answered Jul 18, 2016 at 14:03

Shintu Joseph

9627 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

UnworthyToast Over a year ago

That worked! Thanks! Why do I even need to use kioskForm at all, regardless of how it's spelled? idnumber is completely unique; there is not another 'idnumber' nested anywhere else. So by my logic, simply using idnumber.$error should automatically map to the only existing element with that name.

Shintu Joseph Over a year ago

Good to know that :-), Angular maintains an error object for every form with the form name, like kioskForm.$error

UnworthyToast Over a year ago

Oh it's tied to the form! Great, that helps a lot. Thanks again!

Shintu Joseph Over a year ago

Pleasure is mine :-)

Collectives™ on Stack Overflow

ngMessages not working correctly with nested input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related