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

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