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
– Moussa, Commented Aug 4, 2016 at 9:25
@Mouss So you just want an input validation? ng-model makes also validation possible... — Michelangelo
– Michelangelo, Commented Aug 4, 2016 at 9: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
– Moussa, Commented Aug 4, 2016 at 9:29
you can use ng-form directive in div. This will work. check the link plnkr.co/edit/Z090iiwrinMoFHfP2vyA?p=preview — user4226210
– user4226210, Commented Aug 4, 2016 at 9:40

dfsq · Accepted Answer · 2016-08-04 09:26:18Z

4

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

answered Aug 4, 2016 at 9:26

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

Moussa Over a year ago

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?

dfsq Over a year ago

I mean <input ng-model="asdfa" name="something">. 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(...).

Collectives™ on Stack Overflow

Can we use angular input validation without form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related