0

Alguém poderia me ajudar a passar o conteudo de um input text pra uma função no angular?

meu html é:

 <form class= "form mt-4">

<mat-card>
    <mat-card-header>
    <mat-card-title>{{ 'buscaAtestado' | translate }}</mat-card-title>
    </mat-card-header>

    <div class="text-center mb-3">
        <i class="fa fa-search mr-2"></i>
        <input  [value]="filter"  class= "rounded mb-3" type="search" placeholder="search..." autofocus>
        <section fxLayout="row" fxLayout.xs="column" fxLayoutWrap class="container" fxLayoutAlign="center center" fxLayoutGap="20px" fxLayoutGap.xs="20px">
            <button type="button" mat-raised-button class="download" (click)="baixarTodos()">{{ 'baixarAtestados' | translate}}</button>
            <button type="reset" mat-raised-button class="limpar" (click)="onClean()"> {{ 'limpar' | translate }}</button>
            <button type="submit" mat-raised-button class="pesquisar" (click)="onSearch()">{{ 'pesquisar' | translate }}</button>
        </section>
    </div>
</mat-card>

e o meu component:

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


filter: string= '';


constructor(
    private projetoService: ProjetoService) {}

ngOnInit(): void {


}

onSearch(){
    console.log(this.filter)
}
1
  • O melhor seria vc usar o ngModel ou o reactiveForms Commented 24/07/2019 às 21:14

3 Respostas 3

2

Olá viva, uma forma de aceder ao input pode ser como o respondida anteriormente, com 2 way binding.

<input  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {


private filtro: string= '';


constructor() {}

ngOnInit(): void {
}
}

Outra alternativa:

<input #myInput  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>
import { Component,Inject,ViewChild,ElementRef,AfterViewInit} from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {

@ViewChild('myInput') myInput:ElementRef; 
private filtro: string= '';

constructor() {}

ngAfterViewInit() {
    console.log(this.myInput.nativeElement.value);
    }
}

Angular 8, na opção com ViewChild, adicionar o parametro static:

@ViewChild('myInput', {static: true}) myInput:ElementRef; 
0

funcionou com o ngModel e faltou atribuir o name a tag

<input  [(ngModel)]="filtro" name ="filtro" class= "rounded mb-3" type="search" placeholder="search..." autofocus>
1
  • Já tentou usar FormGroup e FormBuilder? Sempre uso e não tem erro. Qualquer coisa eu informo o código. Commented 25/07/2019 às 19:41
0

Primeiro voce precisa inserir algum evento no seu template, para esse caso o evento "onchange".

<input type="search" (change)="//seu methodo" />

Feito isso, insira o seu metodo com o parametro que deseja passar para ele.

Exemplos

Passando um valor fixo:

 <input type="search" (change)="onSelect('foo')" />

definindo uma variavel para o seu elemento e resgatando os valores do mesmo, exemplo:

<input type="search" #mySearch (change)="onSearch(mySearch.value)" />

resgatando o elemeto em si:

// no template
<input type="search" (change)="onSearch($event)" />

// na sua classe:
onSearch(event) {
  const value = event.target.value;
}

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 .