Alguien me puede explicar para que sirve estas etiquetas:
#email="ngModel"
[(ngModel)]="user.email"
De este fragmento de codigo:
<input type="email" #email="ngModel" name="email" [(ngModel)]="user.email" class="form-control" required />
Alguien me puede explicar para que sirve estas etiquetas:
#email="ngModel"
[(ngModel)]="user.email"
De este fragmento de codigo:
<input type="email" #email="ngModel" name="email" [(ngModel)]="user.email" class="form-control" required />
El símbolo numeral (
#
) indica que se creará una Template reference variable, la cual es una variable que es una referencia al elemento DOM del template en donde se declara.
La siguiente instrucción:
input type="email" #email name="email" />
Crea una variable que referencia al elemento input
, por consiguiente, podemos hacer algo como:
{{ email.value }}
O en el controlador:
@ViewChild('email') email: TemplateRef<HTMLInputElement>
const emailInput = this.email.nativeElement as HTMLInputElement
emailInput.value // o .focus() o cualquier propiedad/método disponible en HTMLInputElement
¿Qué significa el valor asignado a email
?
La instrucción #email="ngModel"
significa lo siguiente:
Dentro de la variable de referencia
ngModel
asociada con este control.
Esto te va a permitir acceder a propiedades útiles como dirty
, valid
, enabled
, valueChanges
, etc.
Por otro lado, el siguiente código:
<input type="email" #email="ngModel" [(ngModel)]="user.email">
Simplemente indica que existirá un two-way data binding entre ese control y la variable email
del objeto user
.
Esto, resumiendo, significa que dicho control está ligado tanto en input como output con la variable user.email
, lo que significa una comunicación bidireccional: los cambios que se realicen tanto sobre el input como en la variable user.email
se verán reflejados en el mismo.