我们可以在没有表单的情况下使用角度输入验证吗答案

【问题标题】：Can we use angular input validation without form我们可以在没有表单的情况下使用角度输入验证吗
【发布时间】：2016-08-04 09:20:39
【问题描述】：

有没有一种方法可以在没有表单的情况下使用角度输入验证。见角度plunker。当我将<form name="myForm"> 更改为<div name="myForm"> 时，验证不再起作用。

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>

【问题讨论】：

删除form的原因是什么？
我对输入的真正使用是在带有angular.module('myModule').component('myInput') 的输入组件内，它将在父表单组件中调用，我不想将表单放入表单中
@Mouss 所以你只是想要一个输入验证？ ng-model 也使验证成为可能...
@Mikey ng-model 没有响应我的需求，因为我有 20 个 angular 指令用于特定的输入表单验证，我不想用 ng-model 重写所有这些验证指令跨度>
你可以在 div 中使用 ng-form 指令。这将起作用。检查链接plnkr.co/edit/Z090iiwrinMoFHfP2vyA?p=preview

标签： javascript angularjs validation

【解决方案1】：

您需要有表单指令，因为 ngModel 搜索它的控制器以便注册自己并利用验证功能。

如果由于布局原因你不能有表单标签（嵌套的<form>标签无效）那么你可以使用ngForm指令来达到同样的效果：

<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>

演示： https://plnkr.co/edit/WlCqNBWtqiGerkQy0Wad?p=preview

【讨论】：

感谢@dfsq，当您说 > ngModel 搜索其控制器以注册自身并利用验证功能时。你是说 ngModel 搜索表单的控制器？
我的意思是<input ng-model="asdfa" name="something">。因此 ngModel 指令在 DOM 树中搜索 ngForm 指令。当它找到它时，它会向它注册自己。类似ngFormController.addControl(...)。