Can we use angular input validation without form

Question

Is there a way to use angular input validation without form. See angular plunker. When I change <form name="myForm"> by <div name="myForm"> the validation does not work anymore.

HTML :

<form name="myForm">
  <label>
     User name:
     <input type="text" name="userName" ng-model="user.name" required>
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.userName.$error.required">
     Required!</span>
  </div>
  <label>
     Last name:
     <input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.lastName.$error.minlength">Too short!</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">Too long!</span>
  </div>
</form>

My real use of input is inside an input component with `angular.module('myModule').component('myInput')` which will be called in a parent form component and I don't want to put a form in a form — Moussa, Aug 04 '16 at 09:25
@Mouss So you just want an input validation? `ng-model` makes also validation possible... — Michelangelo, Aug 04 '16 at 09:27
@Mikey ng-model doesn't respond with my needs because I have like 20 angular directive for specific input form validation and I don't want to rewrite all those validation directives with ng-model — Moussa, Aug 04 '16 at 09:29
You can refer [Form Validation without Form Tag](http://stackoverflow.com/questions/22098584/angularjs-input-validation-with-no-enclosing-form) by Silvio Lucas — Suresh PMS, Aug 04 '16 at 09:38
you can use ng-form directive in div. This will work. check the link https://plnkr.co/edit/Z090iiwrinMoFHfP2vyA?p=preview — , Aug 04 '16 at 09:40

score 4 · Accepted Answer · answered Aug 04 '16 at 09:26

You need to have form directive because ngModel searches its controller in order to register itself and leverage validation capabilities.

If for layout reasons you can't have form tag (nested <form> tags are invalid) then you can use ngForm directive to achieve the same effect:

<ng-form name="myForm">
  <label>
     User name:
     <input type="text" name="userName" ng-model="user.name" required>
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.userName.$error.required">
     Required!</span>
  </div>
  <label>
     Last name:
     <input type="text" name="lastName" ng-model="user.last"
     ng-minlength="3" ng-maxlength="10">
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.lastName.$error.minlength">
      Too short!</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">
      Too long!</span>
  </div>
</ng-form>

Demo: https://plnkr.co/edit/WlCqNBWtqiGerkQy0Wad?p=preview

Thanx @dfsq, when you say > ngModel searches its controller in order to register itself and leverage validation capabilities. You mean ngModel search form's controller? — Moussa, Aug 04 '16 at 09:43
I mean ``. So ngModel directive searches for `ngForm` directive waling up the DOM tree. When it find it it registers itself with it. Something like `ngFormController.addControl(...)`. — dfsq, Aug 04 '16 at 10:08

Can we use angular input validation without form

1 Answers1