Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
Con el enlace bidireccional, sus componentes pueden compartir datos, manejar eventos y actualizar valores en tiempo real.
El enlace bidireccional permite a los usuarios ingresar datos desde el archivo HTML y enviarlos al archivo TypeScript y viceversa. Esto es útil para validación de entrada, manipulación y más.
Una vez que pasa datos del HTML al archivo TypeScript, puede usar los datos para completar cierta lógica comercial. Un escenario de ejemplo sería si desea verificar si el nombre ingresado en un campo de entrada ya existe.
¿Cómo se puede utilizar la encuadernación bidireccional?
El enlace bidireccional en aplicaciones Angular generalmente se establece en el .html archivo, usando el modelo ng directiva. El enlace bidireccional en un formulario de entrada puede verse así:
<aporte
tipo ="correo electrónico"
identificación ="correo electrónico"
nombre="correo electrónico"
marcador de posición ="[email protected]"
[(ngModel)]="dirección de correo electrónico"
/>En el .ts archivo, el dirección de correo electrónico La variable está vinculada a la dirección de correo electrónico del formulario.
dirección de correo electrónico: Cadena = ''; Cómo configurar un formulario de ejemplo en una aplicación angular
Al crear una aplicación básica, puede usar el enlace bidireccional para verificar si ya existe un nombre de usuario potencial.
- Crear un nueva aplicación angular.
- ejecutar el ng generar componente comando para crear un nuevo componente. Aquí es donde almacenará el formulario.
ng generar formulario de verificación de nombre de usuario del componente - Reemplace todo el código en su aplicación.componente.html archivo con las siguientes etiquetas:
<app-username-checker-form></app-username-checker-form> - Agregue el siguiente CSS en su nuevo componente .css archivo, ubicado en nombre-de-usuario-checker-form.component.css, para darle estilo al formulario:
.envase {
pantalla: flexible;
alineación de texto: centro;
justificar-contenido: centro;
alinear elementos: centro;
altura: 100vh;
}.tarjeta {
ancho: 50%;
color de fondo: melocotón;
borde-radio: 1rem;
relleno: 1 rem;
}aporte {
borde: 3sólido #1a659e;
borde-radio: 5px;
altura: 50px;
altura de línea: normal;
color: #1a659e;
bloqueo de pantalla;
ancho: 100%;
tamaño de caja: cuadro de borde;
usuario-seleccionar: auto;
tamaño de fuente: 16px;
relleno: 0 6px;
relleno-izquierda: 12px;
}aporte:enfocar {
borde: 3sólido #004e89;
}.btn {
bloqueo de pantalla;
contorno: 0;
cursor: puntero;
borde: 2sólido #1a659e;
borde-radio: 3px;
color: #fff;
fondo: #1a659e;
tamaño de fuente: 20px;
peso de fuente: 600;
altura de línea: 28px;
relleno: 12px 20px;
ancho: 100%;
margen superior: 1rem;
}.btn:flotar {
fondo: #004e89;
borde: #004e89;
}.éxito {
color: #14ae83;
}.error {
color: #fd536d;
} - Agregue el siguiente CSS en src/estilos.css para configurar la familia de fuentes, el fondo y los colores del texto de la aplicación en general:
@importar URL ("https://fonts.googleapis.com/css2?family=Poppins: peso@300;400&mostrar = intercambiar");cuerpo {
Familia tipográfica: "Poppins";
color de fondo: papayawhip;
color: #1a659e;
} - Reemplace el código en nombre-de-usuario-checker-form.component.html, para agregar el formulario de verificación de nombre de usuario:
<clase div="envase">
<clase div="tarjeta">
<h1> Comprobador de nombre de usuario </h1><forma>
<aporte
tipo ="texto"
identificación ="nombre de usuario"
nombre="nombre de usuario"
marcador de posición ="por favor, ingrese un nombre de usuario"
/>
<clase de botón ="btn"> Ahorrar </button>
</form></div>
</div> - Ejecute su aplicación usando el comando ng serve en la terminal.
ng servir - Consulta tu solicitud en http://localhost: 4200/.
Envío de datos entre los archivos HTML y TypeScript
Utilice el enlace bidireccional para enviar datos a su .ts archivo y volver a la .html archivo. Esto es posible con el uso de modelo ng en la forma aporte etiquetas
- Importar el Módulo de formularios en el aplicación.módulo.ts archivo y agréguelo al importaciones formación:
importar { Módulo de formularios } de '@angular/formularios';@NgModule({
//...
importaciones: [
// otras importaciones
Módulo de formularios
],
//...
}) - declarar un nombre de usuario variable de clase en el .ts archivo, nombre-de-usuario-checker-form.component.ts:
nombre de usuario: cadena = ''; - En nombre-de-usuario-checker-form.component.html, agregar [(ngModel)] con el nombre de usuario variable en la etiqueta de entrada. Esto permite el enlace bidireccional, y todo lo que se escriba en la entrada de nombre de usuario del formulario se asigna a la variable de nombre de usuario en el .ts archivo.
<aporte
tipo ="texto"
identificación ="nombre de usuario"
nombre="nombre de usuario"
marcador de posición ="por favor, ingrese un nombre de usuario"
[(ngModel)]="nombre de usuario"
/> - Para comprobar que los datos se envían al .ts archivo, crea un ahorrar() método en nombre-de-usuario-checker-form.component.ts. Cuando envíe el formulario, la aplicación llamará a esta función.
ahorrar(): vacío {
consola.registro(este.nombre de usuario);
} - Añade el ngEnviar directiva a la
- Al hacer clic en el botón Guardar, el ahorrar() La función imprimirá el valor ingresado en el campo de entrada a la consola. Puede ver la consola en tiempo de ejecución utilizando las herramientas de desarrollo del navegador. Si no está familiarizado con DevTools del navegador o viendo la consola, puede obtener más información sobre cómo usar Chrome DevTools.
- Envía el nombre de usuario de vuelta a .html archivo. Agregue la variable de nombre de usuario entre corchetes al nombre-de-usuario-checker-form.component.html archivo, después de la
- En nombre-de-usuario-checker-form.component.ts, agregue algunas variables de clase para verificar si el nombre de usuario ya existe. declarar un nombres de usuario matriz con algunos nombres de usuario tomados, y agregue un mensaje cadena que informa al usuario del cheque. La variable es un nombre de usuario válido es verdadero si el nombre de usuario ingresado no está en la matriz de nombres de usuario.
nombres de usuario: cadena[] = [ 'bart', 'lisa', 'freír', 'leela' ];
mensaje: cadena = '';
es un nombre de usuario válido: booleano = FALSO; - El ahorrar() El método debe verificar si el nombre de usuario ingresado ya está en la matriz de nombres de usuario existente o no. Dependiendo del resultado, el mensaje se establecerá en consecuencia.
ahorrar(): vacío {
if (este.nombre de usuario!= '') {
este.isValidUsername = !este.nombres de usuario.incluye(
este.nombre de usuario.toLowerCase()
);si (este.es un nombre de usuario válido) {
este.mensaje = 'Tu nuevo nombre de usuario es '${este.nombre de usuario}'`;
} demás {
este.mensaje = `El nombre de usuario'${este.nombre de usuario}'ya ha sido tomado`;
}
}
} - Completar la nombre-de-usuario-checker-form.component.html archivo mostrando si el nombre de usuario ingresado existe o no. Agregue un mensaje de error debajo de la
etiquetas después del formulario. El es un nombre de usuario válido La variable es útil aquí para determinar el color del mensaje que se muestra.
<p *ngIf="nombre de usuario" [Claseng]="es un nombre de usuario válido? 'éxito': 'error'">
{{ mensaje }}
</pag> - En su navegador en servidor local: 4200, intente ingresar un nombre de usuario que exista en la matriz de nombres de usuario: Luego, intente ingresar un nombre de usuario que no lo haga.
Uso del enlace bidireccional para enviar datos al desarrollar una aplicación
El enlace bidireccional es útil para validaciones, comprobaciones, cálculos y más. Permite que los componentes se comuniquen y compartan datos en tiempo real.
Puede usar funciones de enlace bidireccional en varias partes de una aplicación. Una vez que recibe los datos del usuario, puede ejecutar la lógica empresarial e informar al usuario de los resultados.
A veces, le gustaría almacenar los datos del usuario en una base de datos. Puede explorar diferentes tipos de proveedores de bases de datos que puede usar, incluida la base de datos NoSQL de Firebase.
