<commit_before># Formulários

Formulários representam uma das formas mais utilizadas para receber dados do usuário. Há duas formas de utilizar formulários em Angular:

* formulários baseados em templates
* formulários baseados em models

Este capítulo trata da primeira das formas.

## Configuração do módulo

Formulários baseados em templates estão definidos no módulo `FormsModule`, disponível no pacote `@angular/forms`. Considere que um aplicativo tenha o arquivo `app.module.ts` no qual está definido o módulo raiz. O módulo raiz deve importar o módulo `FormsModule`.

```TypeScript
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

@NgModule({
    imports : [
        BrowserModule,
        FormsModule
    ],
    ...
})
export class AppModule { }
```

Isso permitirá que componentes desse módulo possam usar o `FormsModule`.

## Template do componente

Antes de lidar com detalhes do formulário em Angular, o código a seguir mostra um trecho de um código HTML referente a um formulário:

```html
<form>
  <div class="form-group">
    <label for="nome"><NAME></label>
    <input type="text" class="form-control" id="nome" name="nome" required>
  </div>
  <button type="submit" class="btn btn-success">Salvar</button>
  <button type="button" class="btn btn-default">Limpar</button>
</form>
```

O código utiliza os elementos `form`, `label`, `input` e `button`, que são responsáveis por gerar o formulário, em si. As classes `form-group`, `form-control`, `btn`, `btn-success` e `btn-default` pertencem ao framework Bootstrap.

Para transformar este código em template do Angular, é necessário utilizar diretivas e data binding.

### Data binding

O primeiro passo é utilizar data binding no elemento `input`:

```html
<input type="text" class="form-control" id="nome" name="nome" required 
      [(ngModel)]="tarefa.nome" #nome="ngModel">
```

A sintaxe `[(ngModel]="..."` permite o recurso de two-way data binding, o que faz com que o valor indicado como valor do atributo seja atualizado tanto no template quanto na classe do componente. Neste caso, `[(ngModel)]="tarefa.nome"` considera que a classe do componente possua um atributo `tarefa`, que tem um atributo `nome`. O potencial do two-way data binding é que o fato desta sintaxe estar aplicada a um elemento `input` faz com que a entrada de texto pelo usuário atualize o objeto em questão, e vice-versa.

### Variável temporária de template

Uma variável temporária de template é usada como uma referência ao controle de entrada. Essa referência pode ser usada diretamente no template ou, por exemplo, passada como parâmetro para uma função da classe do componente.

A sintaxe para a variável temporária é usar `#...`, como no código a seguir:

```html
<input type="text" class="form-control" id="nome" name="nome" required 
      [(ngModel)]="tarefa.nome" #nome>
```

Ao usar uma variável temporária, o `input` é referenciado por meio de `nome`:

```html
<input type="text" ... #nome>
{{nome.value}}
```

Isso vai fazer com que o valor \(atributo `value`\) do controle de entrada seja apresentado depois de uma alteração.

### Estado do controle de entrada de dados e validação

Quando o elemento `input` possui o atributo `required`, isso indica que é obrigatório fornecer um valor para este controle de entrada de dados. Isso é chamado de validação.

Utilizar `ngModel` em um controle de formulário faz mais do que o two way data binding, pois informa o estado do componente. O estado tem relação com a interação entre o usuário e o controle \(e seu valor\). O Angular atribui classes CSS ao controle de entrada conforme o estado dele, bem como fornece atributos para o objeto associado ao controle de entrada. A tabela a seguir mostra essa relação.

| Estado | Classe se true | Classe se false |
| :--- | :--- | :--- |<commit_msg>Updates angular/formularios.md<commit_after># Formulários

Formulários representam uma das formas mais utilizadas para receber dados do usuário. Há duas formas de utilizar formulários em Angular:

* formulários baseados em templates
* formulários baseados em models

Este capítulo trata da primeira das formas.

## Configuração do módulo

Formulários baseados em templates estão definidos no módulo `FormsModule`, disponível no pacote `@angular/forms`. Considere que um aplicativo tenha o arquivo `app.module.ts` no qual está definido o módulo raiz. O módulo raiz deve importar o módulo `FormsModule`.

```TypeScript
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

@NgModule({
    imports : [
        BrowserModule,
        FormsModule
    ],
    ...
})
export class AppModule { }
```

Isso permitirá que componentes desse módulo possam usar o `FormsModule`.

## Template do componente

Antes de lidar com detalhes do formulário em Angular, o código a seguir mostra um trecho de um código HTML referente a um formulário:

```html
<form>
  <div class="form-group">
    <label for="nome">Nome da tarefa</label>
    <input type="text" class="form-control" id="nome" name="nome" required>
  </div>
  <button type="submit" class="btn btn-success">Salvar</button>
  <button type="button" class="btn btn-default">Limpar</button>
</form>
```

O código utiliza os elementos `form`, `label`, `input` e `button`, que são responsáveis por gerar o formulário, em si. As classes `form-group`, `form-control`, `btn`, `btn-success` e `btn-default` pertencem ao framework Bootstrap.

Para transformar este código em template do Angular, é necessário utilizar diretivas e data binding.

### Data binding

O primeiro passo é utilizar data binding no elemento `input`:

```html
<input type="text" class="form-control" id="nome" name="nome" required 
      [(ngModel)]="tarefa.nome" #nome="ngModel">
```

A sintaxe `[(ngModel]="..."` permite o recurso de two-way data binding, o que faz com que o valor indicado como valor do atributo seja atualizado tanto no template quanto na classe do componente. Neste caso, `[(ngModel)]="tarefa.nome"` considera que a classe do componente possui um atributo `tarefa`, que tem um atributo `nome`. O potencial do two-way data binding é que o fato de esta sintaxe estar aplicada a um elemento `input` faz com que a entrada de texto pelo usuário atualize o objeto em questão, e vice-versa.

### Variável temporária de template

Uma variável temporária de template é usada como uma referência ao controle de entrada. Essa referência pode ser usada diretamente no template ou, por exemplo, passada como parâmetro para uma função da classe do componente.

A sintaxe para a variável temporária é usar `#...`, como no código a seguir:

```html
<input type="text" class="form-control" id="nome" name="nome" required 
      [(ngModel)]="tarefa.nome" #nome>
```

Ao usar uma variável temporária, o `input` é referenciado por meio de `nome`:

```html
<input type="text" ... #nome>
{{nome.value}}
```

Isso vai fazer com que o valor \(atributo `value`\) do controle de entrada seja apresentado depois de uma alteração.

### Estado do controle de entrada de dados e validação

Quando o elemento `input` possui o atributo `required`, isso indica que é obrigatório fornecer um valor para este controle de entrada de dados. Isso é chamado de validação.

Utilizar `ngModel` em um controle de formulário faz mais do que o two way data binding, pois informa o estado do componente. O estado tem relação com a interação entre o usuário e o controle \(e seu valor\). O Angular atribui classes CSS ao controle de entrada conforme o estado dele, bem como fornece atributos para o objeto associado ao controle de entrada. A tabela a seguir mostra essa relação.

| Estado | Classe se true | Classe se false |
| :--- | :--- | :--- |
{'fraction_non_alphanumeric': 0.09577320904099093, 'fraction_numerical': 0.0, 'mean_word_length': 4.39022711631108, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4189104', 'n_tokens_mistral': 2564, 'n_tokens_neox': 2483, 'n_words': 1040}