Los elementos de área de texto proporcionan validación y control de estado básico. El atributo ng-model hace referencia a text-directive . El estado actual de los elementos de área de texto está en manos de Angular JS. A continuación se enumeran los estados de la directiva Textarea:
- $tocado: Significa un campo tocado.
- $sin tocar: Significa un campo sin tocar.
- $valid: Significa contenido de campo válido.
- $invalid: Significa contenido de campo no válido.
- $dirty: Significa una modificación en el contenido del campo.
- $pristine: Significa contenido de campo sin modificar.
Sintaxis:
<textarea ng-model="name"></textarea>
Propiedades: las clases se utilizan para diseñar elementos de Textarea según el estado que tengan. El atributo ng-model se usa para hacer referencia a la directiva de texto. A continuación se enumeran las clases comúnmente utilizadas:
- ng-touched: Significa clase aplicada en el campo tocado.
- ng-untouched: Significa clase aplicada en el campo intacto.
- ng-valid: Significa clase aplicada en contenido de campo válido.
- ng-invalid: significa clase utilizada para contenido de campo no válido.
- ng-pristine: Significa clase utilizada para el estado que tiene una modificación en el campo.
- ng-dirty: significa clase utilizada con contenido de campo sin modificar.
Valor devuelto: Devuelve el texto que el usuario ha introducido en el campo de texto. Ejemplo 1:
javascript
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
textarea.ng-valid {
color: green;
background-color: lightgreen;
}
textarea.ng-invalid {
background-color: green;
}
</style>
<body ng-app="">
<h1>
<center>
GeeksforGeeks
</center>
</h1>
<p><b>Textarea field:<br><br>
Start typing.......</b></p>
<textarea ng-model="gfg"
required>
</textarea>
</body>
</html>
Salida: Antes de escribir: 
Después de escribir: 
Ejemplo 2:
javascript
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
textarea.ng-dirty {
color: green;
background-color: lightgreen;
}
textarea.ng-pristine {
background-color: green;
}
</style>
<body ng-app="">
<h1>
<center>
GeeksforGeeks
</center>
</h1>
<p>
<b>Textarea field:<br>
<br>
Start typing.......</b></p>
<textarea ng-model="gfg" required>
</textarea>
</body>
</html>
Salida: Antes de escribir: 
Después de escribir: 
Soporte del navegador: Los siguientes navegadores admiten la directiva de área de texto.
- Google Chrome
- explorador de Internet
- Ópera
- Firefox
- Safari
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA