Angular input validity property without a form

Question

I have inputs in a web page without the form tag (useless to me). How can I get their validity status inside the HTML ? This

<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">

doesn't work.

ivarni · Accepted Answer · 2014-07-15 11:35:09Z

1

I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.

<form name="myForm">
    <input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
    <input type="button" ng-show="myForm.myInput.$valid">
</form>

Should work.

If you're unable to use the form tag for any reason, you'll have to wire that up manually.

answered Jul 15, 2014 at 11:35

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

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

5 Comments

ivarni Over a year ago

For another good reason to use the form tag, see this answer. Forms have semantic value even if the data is sent using AJAX.

Luke Skywalker Over a year ago

Interesting comment but in my case the page is sufficiently complex for the enter key not to mean anything. If I had to manage that key manually, I wouldn't know what to do with it.

Luke Skywalker Over a year ago

Ivarni, in the example you provided, the form is not connected to a controller. To access myForm.myInput.$valid, do I need to precise ng-controller="myFormController" and implement an empty controller in the javascript code or is there some default controller automatically created by Angular?

ivarni Over a year ago

No, Angular overrides the form element with a directive, so once you use <form> tag a FormController is created automatically. Take a look at docs.angularjs.org/api/ng/directive/form

ivarni Over a year ago

More specifically, "If the name attribute is specified, the form controller is published onto the current scope under this name." This is what lets you dot your way in to access the $valid property.

Collectives™ on Stack Overflow

Angular input validity property without a form

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related