Как использовать Угловую форму для других элементов, таких как div?

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>