Modulo FormsModule e Diretiva ngModel - Angular

Nas aplicações web, geralmente utilizamos formulários para interagir com o usuário. Para implementar a funcionalidade dos formulários, os componentes precisam importar o módulo FormsModule utilizando o parâmetro imports. Antes de utilizar os formulários nos componentes, é necessário importar o módulo FormsModule no módulo principal AppModule, o que permite o uso adequado dos formulários:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule], // Importa FormsModule para trabalhar com formulários
    template: ``
})
export class AppComponent { }

Além disso, no arquivo de configuração da aplicação (package.json), o pacote "angular/forms" deve estar listado entre as dependências utilizadas:

{
  "name": "helloapp",
  "version": "1.0.0",
  "description": "Projeto Angular",
  "author": "www.programicio.com",
  "scripts": {
      // comandos angular cli
  },
  "dependencies": {
      "@angular/forms": "~17.0.0",
      // outros pacotes
  },
  "devDependencies": {
      // outros pacotes
  }
}

Ao trabalhar com formulários, a diretiva essencial é o NgModel. Essa diretiva cria um objeto FormControl baseado no modelo passado e vincula esse modelo ao elemento de formulário gerado. O FormControl rastreia o valor do modelo, além de ser responsável por validar esse valor e gerenciar a interação com o usuário.

A diretiva NgModel recebe o modelo passado como uma propriedade de entrada. Podemos usar tanto o binding unidirecional quanto o binding bidirecional.

Se for necessário apenas exibir o valor do modelo no campo de entrada, o binding unidirecional é suficiente:

<input name="title" [ngModel]="title" />

Aqui, um vínculo simples de propriedade é utilizado, onde o modelo é uma propriedade title definida na classe do componente.

Caso seja necessário acompanhar as alterações nos dados inseridos, utilizamos o binding bidirecional:

<input name="title" [(ngModel)]="title" />

Agora, vamos examinar a aplicação do NgModel com um exemplo. Consideremos um projeto com uma estrutura básica:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   ├── main.ts  
│   ├── index.html 
├── angular.json    
├── package-lock.json
├── package.json
└── tsconfig.json

Aqui está a definição do componente em app.component.ts:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

class User {
    constructor(public name: string, 
                public age: number, 
                public company: string) { }
}

@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule], // Importa FormsModule para trabalhar com formulários
    template: `<div> 
                    <p>
                        <label>Nome do usuário</label><br>
                        <input name="name" [(ngModel)]="name" />
                    </p>
                    <p>
                        <label>Idade</label><br>
                        <input type="number" name="age" [(ngModel)]="age" />
                    </p>
                    <p>
                        <label>Empresa</label><br>
                        <select name="company" [(ngModel)]="company">
                        @for(comp of companies; track $index){
                            <option [value]="comp">
                                {{comp}}
                            </option>
                        }
                        </select>
                    </p>
                    <button (click)="addUser()">Adicionar</button>
              </div>
              <div>
                <h3>Itens adicionados</h3>
                <ul>
                @for(u of users; track $index){
                    <li>{{u.name}} ({{u.company}}) - {{u.age}}</li>
                }
                </ul>
              </div>`
})
export class AppComponent { 
    name: string = "";
    age: number = 18;
    company: string = "";
      
    users: User[] = [];
    companies: string[] = ["Apple", "Microsoft", "Google", "Jetbrains"];
      
    addUser() {
        this.users.push(new User(this.name, this.age, this.company));
    }
}

Aqui, foi definida a classe User com três propriedades. O componente AppComponent contém um array de usuários e um array de empresas. No template, foram definidos três campos de entrada. Cada campo possui a diretiva [(ngModel)], que define a ligação entre o valor do campo e a propriedade correspondente no componente. O método addUser() é chamado quando o botão é clicado, adicionando os valores inseridos ao array users.

No final do template, os dados adicionados são exibidos na página:

Trabalhando com Formulários usando ngModel em Angular

Os três campos de entrada estão vinculados a valores separados que existem independentemente. No entanto, é possível ir além e definir um modelo que encapsule esses valores, como mostrado abaixo:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";

class User {
    constructor(public name: string, 
                public age: number, 
                public company: string) { }
}

@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule], // Importa FormsModule para trabalhar com formulários
    template: `<div> 
                    <p>
                        <label>Nome do usuário</label><br>
                        <input name="name" [(ngModel)]="newUser.name" />
                    </p>
                    <p>
                        <label>Idade</label><br>
                        <input type="number" name="age" [(ngModel)]="newUser.age" />
                    </p>
                    <p>
                        <label>Empresa</label><br>
                        <select name="company" [(ngModel)]="newUser.company">
                        @for(comp of companies; track $index){
                            <option [value]="comp">
                                {{comp}}
                            </option>
                        }
                        </select>
                    </p>
                    <button (click)="addUser()">Adicionar</button>
              </div>
              <div>
                <h3>Itens adicionados</h3>
                <ul>
                @for(u of users; track $index){
                    <li>{{u.name}} ({{u.company}}) - {{u.age}}</li>
                }
                </ul>
              </div>`
})
export class AppComponent { 
    newUser = new User("", 18, "Google");
      
    users: User[] = [];
    companies: string[] = ["Apple", "Microsoft", "Google", "Jetbrains"];
      
    addUser(){
        this.users.push({...this.newUser});
    }
}

Aqui, foi criada a variável newUser, cujas propriedades estão vinculadas aos campos de entrada. Um ponto importante é que, ao adicionar um novo objeto ao array users, não é passada a referência direta de newUser. Em vez disso, é criado um novo objeto com os valores de newUser, evitando que alterações futuras afetem o objeto já adicionado. O resultado final é o mesmo do exemplo anterior.