0

Olá, eu estou com uma dificuldade em encontrar a solução do meu problema sendo assim estou aqui, estou tentando criar um campo de pesquisa ná minha página, ele não está fazendo a pesquisa, porém não está me retornando nenhum erro no build nem no console, então estou perdido se me esqueci de algum passo ou import de algum modulo, não sei, me ajudem porfavor, segue o código:

servicos.service.ts

import {HttpClient, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';

import {Servico} from './servico/servico.model';
import {AUTONOMOUS_API} from '../app.api';

@Injectable()
export class ServicosService {

  constructor(private http: HttpClient) {}

  servicos(search?: string): Observable<Servico[]> {
    let params: HttpParams;
    if (search) {
      params = new HttpParams().append('q', search);
    }
    return this.http.get<Servico[]>(`${AUTONOMOUS_API}/autonomos/`, {params: params});
  }

  servicosById(id: string): Observable<Servico> {
    return this.http.get<Servico>(`${AUTONOMOUS_API}/autonomos/${id}/`);
 }
}

servicos.component.html

<div class="container">

  <div class="header-content" align="center">
     <h1>Catálogo de Serviços</h1>
     <br>

    <mdc-form-field [formGroup]="searchForm" fluid class="form">
      <mdc-text-field formControlName="searchControl" outlined label="Pesquisar" [mdcElevation]="3">
        <mdc-icon mdcTextFieldIcon leading>search</mdc-icon>
      </mdc-text-field>
    </mdc-form-field>
  </div>

  <div class="row">

  <div *ngFor="let servico of servicos" class="col-sm-4 col-xs-12">
    <app-servico [servico]="servico"></app-servico>
  </div>
</div>

</div>

servicos.component.ts

import { Component, OnInit } from '@angular/core';

import {Servico} from './servico/servico.model';
import {ServicosService} from './servicos.service';

import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {catchError, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {from} from 'rxjs';

@Component({
  selector: 'app-servicos',
  templateUrl: './servicos.component.html',
  styleUrls: ['./servicos.component.scss']
})
export class ServicosComponent implements OnInit {
  servicos: Servico[];

  searchForm: FormGroup;
  searchControl: FormControl;

  constructor(private servicosService: ServicosService,
              private fb: FormBuilder) { }

   ngOnInit() {
    this.searchControl = this.fb.control('');
    this.searchForm = this.fb.group({
      searchControl: this.searchControl
    });

    this.searchControl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(searchTerm => this.servicosService.servicos(searchTerm)
          .pipe(
            catchError(error => from([]))
          )
        )
      ).subscribe(dados => this.servicos = dados);

    this.servicosService.servicos().subscribe(dados => this.servicos = dados);

  }
}

app.module.ts

Meu app.module está grande então vou mandar os principais para o ReactiveForms

// DEFAULT
import { NgModule } from '@angular/core';

import {CommonModule, HashLocationStrategy, LocationStrategy} from '@angular/common';

// COMPONENTS
import { AppComponent } from './app.component';
import { DialogLoginComponent } from './dialog-login/dialog-login.component';
import { DialogContateComponent } from './dialog-contate/dialog-contate.component';
// SERVICES
import {ServicosService} from './servicos/servicos.service';
// REACTIVE FORMS
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
. . .
imports: [
  CommonModule,
  FormsModule,
  ReactiveFormsModule
],
providers: [
  ServicosService,
  {provide: LocationStrategy, useClass: HashLocationStrategy},
],
entryComponents: [
  DialogLoginComponent,
  DialogContateComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }

servicos.component.ts (ATUALIZADO)

 import { Component, OnInit } from '@angular/core';

 import {Servico} from './servico/servico.model';
 import {ServicosService} from './servicos.service';

 import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import {catchError, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
 import {from} from 'rxjs';

 @Component({
   selector: 'app-servicos',
   templateUrl: './servicos.component.html',
   styleUrls: ['./servicos.component.scss']
 })
 export class ServicosComponent implements OnInit {
  servicos: Servico[];

  searchForm = new FormGroup({
  searchControl: new FormControl('')
 });

  constructor(private servicosService: ServicosService,
              private fb: FormBuilder) { }

  ngOnInit() {
     this.searchForm = this.fb.group({
     searchControl: ['']
   });

    this.searchForm.get('searchControl').valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(searchTerm => 
this.servicosService.servicos(searchTerm)
          .pipe(
            catchError(error => from([]))
          )
         )
      ).subscribe(dados => this.servicos = dados);

    this.servicosService.servicos().subscribe(dados => this.servicos = dados);

  }

}

2 Respostas 2

0

Você na criou a instancia do FormGroup da maneira correta.

searchForm = new FormGroup({ searchControl: new FormControl('') });

Veja a documentação completa em: https://angular.io/guide/reactive-forms#step-1-creating-a-formgroup-instance

1
  • Olhe no final do post ja atualizado, não funciona ainda. 6/03/2019 às 17:33
0

faz assim:

export class ServicosComponent implements OnInit {
  servicos: Servico[];
  searchForm: FormGroup;

    get search(){
    return this.searchForm.get('searchControl');
    }

  constructor(private servicosService: ServicosService,
              private fb: FormBuilder) { }

   ngOnInit() {
    this.searchControl = this.fb.control('');
    this.searchForm = this.fb.group({
      searchControl: ['']
    });

    this.search.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(searchTerm => this.servicosService.servicos(searchTerm)
          .pipe(
            catchError(error => from([]))
          )
        )
      ).subscribe(dados => this.servicos = dados);

    this.servicosService.servicos().subscribe(dados => this.servicos = dados);

  }
}
7
  • Aqui não está instanciando o searchControl, então quando chama o this.searchControl da erro. 6/03/2019 às 16:54
  • Ou vc faz get searchControl ou this.search 6/03/2019 às 17:09
  • continua não funcionando, de uma olhada no final do post com o arquivo atualizado 6/03/2019 às 17:32
  • Tem algum erro no console? Ve se na aba network ele ta fazendo a chamada http. 6/03/2019 às 17:40
  • Bom o console está normla sem erros, apenas a mensagem de produção do angular, já na aba network não sei exatamente o que você quer que eu veja ele faz chamada dos arquivos normais pelo que olhei 6/03/2019 às 17:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .