Textarea vs Input en AngularJS
- Directiva Textarea en AngularJS
- Directiva Input en AngularJS
- Diferencias entre el Textarea y la Directiva Input en AngularJS
Este artículo discutirá las diferencias entre las directivas textarea e input con ejemplos en AngularJS.
Mientras trabajan en aplicaciones web que contienen formularios, los nuevos desarrolladores tienen preguntas sobre la diferencia entre input y textarea. En este tutorial, discutiremos ambos en detalle con ejemplos.
Directiva Textarea en AngularJS
Hay muchas situaciones, como crear un formulario de contacto o crear publicaciones de blog y escribir un tablero, que tiene algunos campos en los que esperamos que un usuario escriba varias líneas. Usamos una directiva de textarea para permitir que los usuarios escriban en varias líneas, a veces con un límite de caracteres ya veces sin límite de caracteres.
AngularJS cambia el comportamiento predeterminado del elemento <textarea>, pero solo si la propiedad ng-model está presente. El ng-model proporciona enlace de datos, lo que indica que son parte del modelo AngularJS y se pueden dirigir y actualizar en la función AngularJS y DOM.
Veamos el ejemplo dado a continuación.
# AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<label>Enter Message:</label><br>
<textarea ng-model="myTextarea"></textarea>
</body>
</html>
Producción:
Directiva Input en AngularJS
Input es un HTML utilizado para obtener la entrada del usuario. Al igual que textarea, input también usó ng-model en una directiva Angular para el enlace de datos. Podemos agregar fácilmente una entrada usando el siguiente código.
# AngularJS
<input ng-model="getName">
Lo más importante en el campo de input es la validación. La etiqueta de entrada utiliza la propiedad type para definir el tipo de entrada que un usuario puede ingresar.
Por ejemplo, si queremos que el usuario ingrese solo un correo electrónico en un campo específico, podemos asignar el tipo de email, como se muestra a continuación.
# angular
<input type="email" ng-model="getEmail">
Veamos un ejemplo y utilicemos tanto los campos de entrada como el Textarea para comprobar la diferencia.
# Angular
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
textarea.ng-invalid {
background-color: yellow;
}
textarea.ng-valid {
background-color: lightblue;
}
</style>
<body ng-app="">
<p>Enter Name</p>
<input type="text" ng-model="getName">
<p>Enter Message:</p>
<textarea ng-model="getMessage" required>
Producción:
Diferencias entre el Textarea y la Directiva Input en AngularJS
Hay bastantes diferencias entre el textarea y un campo de input, como se explica a continuación.
textareanos permite obtener varias líneas del usuario como entrada. Pero, por otro lado, solo podemos obtener una entrada limitada de los usuarios mediante el uso de un campo deinput.textareanos permite limitar los caracteres insertados en el área de texto. Mientras que por otro lado el campoinputno nos permite limitar el número de caracteres.- El campo
inputnos permite obtener la validación y solo permite a los usuarios ingresar los datos requeridos con la ayuda de la propiedadtype.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn