2014-11-12 27 views
5

Ben aşağıdaki koduNasıl div gibi diğer elemanlar üzerinde açısal form doğrulama kullanılır?

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

kullanarak açısal form doğrulama kullanıyorum Ama ben böyle kullanmak istiyorsanız:

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

Ama bu olmuyor. Bu çalışmanın herhangi bir yolu var mı? Başka kütüphane kullanmadan

jsfiddle: link

cevap

13

Bunun içinde $pristine, $dirty, $valid, $invalid hizmetleri etkinleştirmek amacıyla ngForm yönergesi (here) kullanabilirsiniz:

sadece bu şekilde tanımlayın:

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

İşte bir örnek:

http://jsfiddle.net/s5efjzue/

1

Formu neden bir div içine sarmıyorsunuz? Bu sizin aradığınız şeyi başarabilir.

<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> 
İlgili konular