0

estoy tratando de hacer un buscador, que basicamente es un form con un input y un boton. quiero que al escribir en el input y al dar enter me envie el parametro mi modulo de typescript. sin que este se recargue. soy principiante en angular 4.

Este es el form de mi vista..

  <form class="form-inline my-2 my-lg-0" >
      <input class="form-control mr-sm-2" type="search" placeholder="Buscar Héroe" aria-label="Search" (keyup.enter)="buscarHeroe(buscarTexto.value)" #buscarTexto>
      <button (click)="buscarHeroe(buscarTexto.value)" class="btn btn-outline-success my-2 my-sm-0" type="button">Buscar</button>
    </form>

Estoy tratando de que el valor se reciba nada mas, solo para probar.

este es la funcion de mi componente de typescript

  buscarHeroe(termino:string){
    console.log(termino);
  }

en si, no se si es la forma correcta, me falta algo? al presionar el boton, si funciona. pero al escribir en el input y dar enter. este refresca la pagina. espero su respuesta!

2
  • y con type="submit" en el button, asi el form toma el click del button como submit? sino agregar (ngSubmit)="buscarHeroe(buscarTexto.value)"en el form debería funcionar tanto para el enter como el submit del button Commented el 30 abr. 2018 a las 2:27
  • 1
    ya lo resolvi amigos, me faltaba agregar el evento. preventDefault, en la funcion.
    – Leonel
    Commented el 30 abr. 2018 a las 15:17

4 respuestas 4

2

Espero no llegar muy tarde, yo opino que si no vas a usar el formulario, pues no necesitas el refresh, lo que deberías hacer es cambiar las etiquetas form por div, para que de ese modo no haga ese submit involuntario.

<div class="form-inline my-2 my-lg-0" >
  <input class="form-control mr-sm-2" type="search" placeholder="Buscar Héroe" aria-label="Search" (keyup.enter)="buscarHeroe(buscarTexto.value)" #buscarTexto>
  <button (click)="buscarHeroe(buscarTexto.value)" class="btn btn-outline-success my-2 my-sm-0" type="button">Buscar</button>
</div>

De esa manera aún que tu botón fuera del tipo submit no se enviaría a ningún lado.

Saludos.

0

yo llevo poco tiempo en angular (unos dos meses) pero igual te puedo echar un cable. Cuando se trabaja en angular (tanto angular 5 como angularjs) y quieres que los datos de una caja de texto (o cualquier otro input) se reciban en el código, debes usar un binding.

¿Que es un binding?: Un binding es una manera de "enlazar" los datos de un campo input, con una variable de tu controlador.

Ejemplo:

control.ts

...
textoInput: string; //Indicas que creas una variable tipo string
...
imprimirString() {
    console.log(textoImput);
}

vista.html

...
<input id="inputText" [(ngModel)]=textoInput (ngModelChange)="imprimirString()">
...

Con [(ngModel)]=textoImput lo que estas haciendo es vincular el valor que introduzca el usuario en el input a la variable textoImput.

Con (ngModelChange) lo que haces es controlar que método se ejecuta cuando cambia el contenido del input.

Con esto cada vez que cambie el texto, se lanzará el método imprimirString(), el cual saca por consola el contenido del input.

1
  • El término más correcto sería two data binding, porque enlaza tanto la vista como el typescript, y creo que en vez de utilizar ngModelChange para la necesidad necesidad actual utilizaría en el botón un (click)="miFuncion();"
    – Lud Osorio
    Commented el 14 feb. 2019 a las 17:34
0

Buen dia, me encontre con el mismo problema y encontre una forma que me ayudo a solucionarlo. Probe de muchas maneras:

// $event.stopPropagation(); KeyboardEvent // event.preventDefault();

pero no funciono para mi, asi tengo el template:

<form role="form" novalidate class="form-inline my-2 my-lg-0">
        <input #buscarTexto (keyup.enter)="buscarHeroe(buscarTexto.value)" type="text" class="form-control mr-sm-2" placeholder="Buscar heroe" aria-label="Search">
        <button (click)="buscarHeroe(buscarTexto.value)" type="button" class="btn btn-outline-success my-2 my-sm-0">Search</button>
    </form>

Este es el codigo del compontent.ts

export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  buscarHeroe(termino: string) {
      console.log(termino);
  }
}

Por ultimo es importante tener en cuenta el archivo app.module.ts, tener importado el FormsModule from '@angular/forms'

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

y hacer la importancion dentro de imports []

    @NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeContentComponent,
    AboutComponent,
    HeroesComponent,
    HeroeDetalleComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    APP_ROUTING
  ],
  providers: [
    HeroesService
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

De esta manera al andar enter dentro del imput no se recarga la pagina.

0

Agrega (submit)="$event.preventDefault()" a tu form

<form class="form-inline my-2 my-lg-0" (submit)="$event.preventDefault()" >
      <input class="form-control mr-sm-2" type="search" placeholder="Buscar Héroe" aria-label="Search" (keyup.enter)="buscarHeroe(buscarTexto.value)" #buscarTexto>
      <button (click)="buscarHeroe(buscarTexto.value)" class="btn btn-outline-success my-2 my-sm-0" type="button">Buscar</button>
    </form>

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.