Como pegar dados do formulário com ngModel (Básico)
- #Angular
Quem é novo no mundo Angular pode achar um pouco confuso esse jeito Angular de se fazer as coisas. O objetivo desse artigo é expor uma forma básica, limpa e seca de se pegar informações dos Inputs e colocá-las em variáveis.
Isto pode ser útil quando se tem a necessidade de se criar um formulário simples ou simplesmente para fins didáticos.
Conto que você já tenha um projeto Angular 8 criado para testes. Caso contrário, basta dar "ng new my-project" e em seguida: "ng g c home"
1 – No .html vamos precisar de um input e um botão.
<!-- ngModel interliga o campo texto com o a variável “meuInput” declarada no .ts -->
Nome: <input [(ngModel)]="meuInput" type="text">
<button (click)="minhaFuncao()">Botão</button>
2 – No .ts, vamos declarar a variável referente ao input e criar a função que foi chamada dentro do button:
export class HomeComponent{
meuInput: string = "";
minhaFuncao(){
alert(this.meuInput);
}
}
O ngModel pertence ao módulo de Formulários do Angular portanto, importe o FormsModule no app.module.ts:
import { FormsModule } from '@angular/forms';
(…)
imports: [
BrowserModule,
FormsModule
],
3 – Caso queira que o valor da variável "meuInput" apareça de volta no template, basta colocá-lo entre chaves: "{{meuInput}}", em algum lugar do seu .html.
Leia mais sobre formulários no Angular em:
