Jak używać sprawdzania poprawności formularza kątowego na innych elementach, takich jak div?

Question

Używam kątową walidacji formularza przy użyciu kodu poniżej

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

Ale jeśli chcę używać tak:

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

Ale to nie działa. Czy istnieje sposób na wykonanie tej pracy? bez korzystania z innych bibliotek.

jsfiddle: link

Answer 1

Można użyć dyrektywy ngForm (here) w celu umożliwienia $pristine, $dirty, $valid, $invalid usługi w tym:

tylko określić to w ten sposób:

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

Oto przykład:

http://jsfiddle.net/s5efjzue/

Answer 2

Dlaczego nie zawinąć formularza w div? Może to osiągnąć to, czego szukasz.

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