javascript - Can we use angular input validation without form - Stack Overflow

admin管理员组

文章数量:1336633

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>

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>

• javascript
• angularjs
• validation

Share Follow asked Aug 4, 2016 at 9:20 MoussaMoussa 4,15477 gold badges3636 silver badges5353 bronze badges 6

• What is the reason to remove the form? – str Commented Aug 4, 2016 at 9:21
• My real use of input is inside an input ponent with angular.module('myModule').ponent('myInput') which will be called in a parent form ponent and I don't want to put a form in a form – Moussa Commented Aug 4, 2016 at 9:25
• @Mouss So you just want an input validation? ng-model makes also validation possible... – 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 Commented Aug 4, 2016 at 9:29
• 1 you can use ng-form directive in div. This will work. check the link plnkr.co/edit/Z090iiwrinMoFHfP2vyA?p=preview – user4226210 Commented Aug 4, 2016 at 9:40

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptCan we use angular input validation without formStack Overflow