1

Estoy tratando de realizar una búsqueda por medio de un formulario y un evento keyUp desde angular y haciendo la petición a mi API en laravel.

El problema es que no estoy teniendo éxito alguno y desconozco la razón... esta es la primera vez que toco angular junto con laravel y estoy teniendo problemas con este.

en mi HTML tengo mi formulario de la siguiente manera

<form #search="ngForm" (keyup)="onKey(search)">
    <div class="form-group">
        <label for="phone">Persona a recoger</label>
        <input type="phone" name="phone" id="phone" class="form-control" placeholder="Nombre de la persona a recoger" required #phone="ngModel" [(ngModel)]="search.phone">
    </div>
</form>

y en el cual me arroja el siguiente error en la consola

introducir la descripción de la imagen aquí

en mi componente tengo lo siguiente

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { UserService } from '../../services/user.service';
import { SearchService } from '../../services/search.service';
import { Search } from '../../models/search';

@Component({
  selector: 'app-add-driver',
  templateUrl: './add-driver.component.html',
  styleUrls: ['./add-driver.component.css'],
  providers: [ UserService, SearchService ]
})
export class AddDriverComponent implements OnInit {

  public identity;
  public token;
  public search: Search;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _searchService: SearchService,
  ) {
    this.identity = this._userService.getIdentity();
    this.token = this._userService.getToken();
  }

  ngOnInit(): void {
    this.search = new Search("");
  }

  onKey(form){
  this._searchService.search(this.search).subscribe(
      response => {
        console.log(response);
      },
      error => {
        console.log(<any>error);
      }
    );
  }

}

mi modelo

export class Search{
  constructor(
    public phone: string
  ){}
}

y por ultimo, mi servicio

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { GLOBAL } from './global';
import { Search } from '../models/search';

@Injectable()
export class SearchService{
  public url: string;

  constructor(
    public _http: HttpClient
  ){
    this.url = GLOBAL.url;
  }

  pruebas(){
    return 'hola mundo';
  }

  search(search): Observable<any>{
    let json = JSON.stringify(search);
    let params = "json="+json;
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
    return this._http.post(this.url + 'search', {headers: headers});
  }

}
2
  • Por favor tu código como texto
    – user128299
    Commented el 20 abr. 2020 a las 5:19
  • @BetaM listo, una disculpa
    – cesg.dav
    Commented el 20 abr. 2020 a las 5:21

1 respuesta 1

0

Después de varias horas he logrado lo que esperaba. En caso de que alguien este pasando por el mismo obstáculo que yo, le comparto el código.

en el HTML el formulario se envia por el evento keyUp al componente, en el ngModel le cambie el parametro a conductor ya que si le colocaba driver, este me lo marcaba como error (Desconozco el por que, si alguien me puede orientar en el por que, se lo agradeceria)

<form #driver="ngForm" (keyup)="onKey(driver)">
    <div class="form-group">
        <input type="text" name="phone" id="phone" class="form-control" placeholder="Numero del chofer" #phone="ngModel" [(ngModel)]="conductor.phone" autocomplete="off">
    </div>
</form>
<div *ngFor='let conductor of conductores' class="text-center p-2 ">
    <p class="btn btn-success">{{conductor.phone}}</p>
</div>

En el componente se le importa el modelo de lo que buscaremos y yo le añadí el modelo de usuario ya que solo podrá hacer la búsqueda si esta registrado por lo que en el modelo viene el token de autenticación

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { UserService } from '../../services/user.service';
import { DriverService } from '../../services/driver.service';
import { Driver } from '../../models/driver';

@Component({
  selector: 'app-driver',
  templateUrl: './driver.component.html',
  styleUrls: ['./driver.component.css'],
  providers: [ UserService, DriverService ]
})
export class DriverComponent implements OnInit {

    public identity;
    public token;
    public conductores: Array<Driver>;
    public conductor: Driver;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _driverService: DriverService
  ) {
    this.identity = this._userService.getIdentity();
    this.token = this._userService.getToken();
  }

  ngOnInit(): void {
    this.conductor = new Driver("");
  }

  onKey(form){
    console.log('arriba');
    this._driverService.search(this.token, this.conductor).subscribe(
        response => {
            console.log(response);
            if(response.status == 'success'){
                this.conductores = response.driver
            }

        },
        error => {
            console.log(<any>error);
        }
    );
  }

}

posteriormente se le envia todo al servicio, (yo use JSON.srtingify para vaya la redundancia, enviarlo en formato de string para evitar algún error en el backend)

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { GLOBAL } from './global';
import { Driver } from '../models/driver';

@Injectable()
export class DriverService{
  public url: string;

  constructor(
    public _http: HttpClient
  ){
    this.url = GLOBAL.url;
  }

  pruebas(){
    return 'hola mundo';
  }

  search(token, conductor): Observable<any>{
    let json = JSON.stringify(conductor);
    let params = "json="+json;
    let headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization',token);
    return this._http.post(this.url + 'search', params, {headers: headers});
  }

}

espero a alguien le funcione si esta batallando al igual que yo... de igual manera si me pueden dar alguna feedback de si se puede mejorar (sin ningún plugin) se lo agradecería.

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.