如何在div等其他元素上使用Angular表单验证？

Question

我正在使用以下代码进行角度表单验证

<form ng-app="" ng-controller="validateCtrl" name="myForm" novalidate>
  <p>Username:<br>
   <input type="text" name="user" ng-model="user" required>
     <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
         <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
 </p>
</form>

但如果我想这样使用:

<div ng-app="" ng-controller="validateCtrl" name="myForm" novalidate>
  <p>Username:<br>
   <input type="text" name="user" ng-model="user" required>
     <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
         <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
 </p>
</div>

但这不起作用.有没有办法做这项工作？不使用任何其他库.

jsfiddle:链接

Answer 1

您可以使用ngForm指令(在这里),以使$pristine,$dirty,$valid,$invalid在它的服务:

只需这样定义:

<div ng-app="" ng-controller="validateCtrl" name="myForm" novalidate ng-form>

这是一个例子:

http://jsfiddle.net/s5efjzue/