2012-11-04 26 views
13

Ho questo codice AngularJS che tenta di mostrare due stelle accanto all'etichetta quando non c'è testo nell'area di testo. Lo stesso codice funziona con i tag di input, ma non con textarea.Convalida area testo JS angolare

<div class="input-left"> 
    <label for="email"> 
     <span ng-show="contactform.email.$error.required" class="required">*</span>Email: 
    </label> 
    <input ng-model="email" type="text" name="email" id="email" required></br></br> 
    <label for="budget">Budzet:</label> 
    <input ng-model="budget" type="text" name="budget" id="budget"> 
</div> 
<div class="clearboth"> 
    <label for="msg" class="left" > 
     <span ng-show="contactform.msg.$error.required" class="required">**</span>Pitanja ili Komentari? 
    </label> 
    <textarea ng-model="msg" rows="8" cols="50" class="input-no-width rounded shaded left clearboth" id="msg" required></textarea> 
</div> 

Secondo AngularJS documentation - textarea dovrebbe comportarsi stesso come input.

risposta

24

Il tuo problema con il tag <textarea> è che non definisce l'attributo name.

AngularJS utilizza l'attributo name per esporre errori di convalida.

Si dovrebbe definire la textarea in questo modo:

<textarea ng-model="msg" name="msg" rows="8" cols="50" 
      class="input-no-width rounded shaded left clearboth" id="msg" required> 
</textarea> 

Si prega di notare che, avendo id e ng-model non è sufficiente per gestire correttamente i messaggi di convalida. Nelle applicazioni AngularJS l'attributo id spesso non ha molto scopo e potrebbe essere omesso.

+0

Grazie. Stavo pensando che usi l'id. – Zec

+0

Questo mi ha aiutato molto. Ma penso che ci sia qualcosa di strano nello stesso momento. Posso lasciare l'attributo name su un campo di inserimento del testo e la convalida funzionerà bene, ma la textarea mi richiede di averla lì. –

0

Per la convalida del modulo nome è molto importante. Dagli un nome dovrebbe funzionare.

<textarea ng-model="msg" 
      rows="8" 
      cols="50" 
      class="input-no-width rounded shaded left clearboth" 
      id="msg" 
      name="msg" 
      required> 
</textarea>