4

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 />
1
  • #email="ngModel" que haces referencia a la variable a una variable email como ngModel (declaras una variable local email). [()] haces un binding en dos sentidos [(target)]="expression" el 15 may. 2019 a las 20:04

1 respuesta 1

3

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 email se guardará la directiva 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.

1
  • 1
    baia, baia, el maestro Gustavo ha regresado a predicar con el ejemplo ;)
    – Phi
    el 15 may. 2019 a las 20:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.