Ultimele tutoriale de dezvoltare web
 

AngularJS Directiva textarea

❮ AngularJS de referință

Exemplu

Un textarea cu datele de legare:

<textarea ng-model="myTextarea"></textarea>

<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Încearcă - l singur »

Definiție și utilizare

AngularJS modifică comportamentul implicit al <textarea> elemente, dar numai în cazul ng-model atribut este prezent.

Acestea furnizează date de legare, ceea ce înseamnă că fac parte din modelul AngularJS, și pot fi menționate și actualizate, atât în ​​funcțiile AngularJS și în DOM.

Ele oferă de validare. Exemplu: un <textarea> Element cu un required atribut, are $valid starea setat la false , atâta timp cât acesta este gol.

Acestea oferă, de asemenea, controlul de stat. AngularJS deține starea actuală a tuturor elementelor textarea.

câmpurile textarea au următoarele stări:

  • $untouched Câmpul nu a fost încă atins
  • $touched Câmpul a fost atins
  • $pristine Câmpul nu a fost încă modificat
  • $dirty Câmpul a fost modificat
  • $invalid Conținutul câmp nu este valid
  • $valid Conținutul de câmp este valabil

Valoarea fiecărui stat reprezintă o valoare booleană, și este fie true de false .

Sintaxă

<textarea ng-model=" name "></textarea>

Elementele textarea sunt menționate prin utilizarea valorii ng-model atribut.

clasele CSS

<textarea> elemente din interiorul unei aplicații AngularJS sunt date anumite clase. Aceste clase pot fi folosite pentru elemente de stil textarea în funcție de starea lor.

Se adaugă următoarele clase:

  • ng-untouched Câmpul nu a fost încă atins
  • ng-touched Câmpul a fost atins
  • ng-pristine Câmpul nu a fost încă modificat
  • ng-dirty Câmpul a fost modificat
  • ng-valid Conținutul de câmp este valabil
  • ng-invalid Conținutul câmp nu este valid
  • ng-valid- key O cheie pentru fiecare validare. Exemplu: ng-valid-required , utilă atunci când există mai mult de un lucru care trebuie să fie validate
  • ng-invalid- key Exemplu: ng-invalid-required

Clasele sunt eliminate în cazul în care valoarea pe care o reprezintă este false .

Exemplu

Se aplică stiluri pentru elementele textarea valide și invalide, folosind CSS standard:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>
Încearcă - l singur »
❮ AngularJS de referință