4

Quiero mostrar un botón hasta detectar que se escribió algo en el input.

<div class="editar-contenedor" *ngIf="mostrarEdicion[i]">
  <input
      type="text"
      *ngIf="mostrarEdicion[i]"
      placeholder="Descripción de la imagen"
      #descripcion>
  <div class="row">
    <h1>{{descripcion}}</h1>
    <div class="col" ngIf="descripcion.value != ''">
      <button
          type="button"
          name="button"
          class="boton-galeria-imagen-individual btn btn-success btn-block"
          (click)="mostrarEdicionCaja(i)">
        Guardar Cambios
      </button>
    </div>
    <div class="col">
      <button
          type="button"
          name="button"
          class="boton-galeria-imagen-individual btn btn-danger btn-block"
          (click)="mostrarConfirmacionEliminar(i)">
        Cancelar
      </button>
    </div>
  </div>
</div>

Pero no puedo obtener el valor del input con

<h1>{{descripcion}}</h1>
<div class="col" ngIf="descripcion.value != ''">
1
  • Intenta cambiando ngIf por ngShow y tambien la expresion description.value != '' por description.length > 0 y dime que pasa.
    – Einer
    el 27 mar. 2018 a las 2:54

2 respuestas 2

1

No entendí muy claramente tu respuesta, pero lo que puedes hacer es usar el doble data biding en el input y para ocultar o esconder el botón puedes usar el length de la variable bindeada si es mayor que 0 significa que se escribió en el input, te pongo un ejemplo muy básico, tal vez puedas adaptarlo a tu codigo https://stackblitz.com/edit/angular-ed6wzm?file=app%2Fapp.component.html

1
  • El link de ejemplo ya no esta disponible
    – Legna
    el 13 sep. 2019 a las 13:09
1

Una manera simple de resolver esto puede ser con [(ngModel)] y *ngIf

Tu input iría de esta manera:

<input [(ngModel)]='textoDeInput' 
type="text" 
class="form-control" 
placeholder="" 
aria-label="" 
aria-describedby="basic-addon1">

Y en tu componente:

textoDeInput: string = null

El botón seria así:

<button  *ngIf='textoDeInput' class="btn btn-outline-secondary" type="button">Aqui toy</button>

Para mi lo correcto es que lo hagas a a través de reactive forms y obtengas las validaciones.

Este es un código de ejemplo en stackblitz sobre lo que quieres.

Este es un ejemplo con validaciones

Y un poco de información sobre reactive forms y sus validaciones

1

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.