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

Answer 1

您可以使用ngForm指令（here）来启用$pristine，$dirty，$valid，$invalid服务它：

只需这样定义：

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

这是一个例子：

http://jsfiddle.net/s5efjzue/

Answer 2

为什么不将表格包装在div中？这可能会实现您的目标。

<div ng-app="" ng-controller="validateCtrl">
  <form 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>

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

2 个答案: