1

Como pegar dados do formulário com ngModel (Básico)

#Angular
Aluizio Junior
Aluizio Junior

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:

https://angular.io/guide/forms-overview


0
5

Comentários (0)

Entusiasta de Tecnologias Web

Brasil