Obtendo e Modificando Modelos em Angular

Além de criar a vinculação de dados, a diretiva ngModel permite definir um objeto NgModel, que será associado a um determinado elemento de entrada. Por exemplo, definimos o seguinte componente:

import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { FormsModule, NgModel } from "@angular/forms";

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule, CommonModule], // para trabalhar com formulários, importamos FormsModule e CommonModule
  template: `
    <div>
      <p>
        <label>Nome do usuário</label><br />
        <input name="name" [(ngModel)]="user.name" #userName="ngModel" />
      </p>
      <p>
        <label>Idade</label><br />
        <input type="number" name="age" [(ngModel)]="user.age" #userAge="ngModel" />
      </p>
      <p>
        <label>Empresa</label><br />
        <select name="company" [(ngModel)]="user.company" #userCompany="ngModel">
          <option *ngFor="let comp of companies">{{ comp }}</option>
        </select>
      </p>
      <button (click)="logUser(userName, userAge, userCompany)">Logar</button>
    </div>
    <div>
      <p>{{ userName.name }}: {{ userName.model }}</p>
      <p>{{ userAge.name }}: {{ userAge.model }}</p>
      <p>{{ userCompany.name }}: {{ userCompany.model }}</p>
    </div>
  `,
})
export class AppComponent {
  user = new User("", 18, "");
  companies: string[] = ["Apple", "Microsoft", "Google", "JetBrains"];

  logUser(name: NgModel, age: NgModel, company: NgModel) {
    console.log(name);
    console.log(age);
    console.log(company);
  }
}

Aqui, para cada campo de entrada, definimos uma variável do tipo NgModel: #userName="ngModel" ou #userAge="ngModel". Cada uma dessas variáveis representa a model e seu estado para o campo correspondente. Usando as propriedades do objeto NgModel, podemos obter dados sobre o estado da model. Em particular, com a propriedade name, podemos acessar o nome do campo de entrada (o valor do atributo name) associado à variável. Com as propriedades model e viewModel, podemos acessar o valor atual desse campo. Por exemplo, exibimos um bloco com os valores inseridos:

<div>
  <p>{{ userName.name }}: {{ userName.model }}</p>
  <p>{{ userAge.name }}: {{ userAge.model }}</p>
  <p>{{ userCompany.name }}: {{ userCompany.model }}</p>
</div>

Além disso, podemos passar essas variáveis para manipuladores de eventos e tratá-las no código do componente. Por exemplo, o método logUser() exibe as propriedades de cada variável NgModel no console. O método é chamado quando o botão é clicado.

Tratando Mudanças de Estado de Modelos

Às vezes, há necessidade de controlar as mudanças na model. No Angular, podemos lidar com eventos embutidos, como o evento change. Vamos modificar o campo de entrada para a model name:

Ao disparar o evento change, o método onNameChange() será chamado. Agora, vamos definir este método no componente:

onNameChange() {
  if (this.user.name === "admin") {
      this.user.name = "Indefinido";
  }
}

Suponha que não queiramos permitir que o usuário insira a palavra "admin". Nesse caso, substituímos dinamicamente essa palavra por outra string.

No entanto, há uma limitação: o evento só é acionado quando o campo de entrada perde o foco. Se for necessário processar a entrada dinamicamente à medida que o usuário digita, um método mais adequado seria tratar o evento ngModelChange. Este evento não está vinculado a nenhum evento padrão de elementos HTML. A funcionalidade ngModelChange é introduzida no elemento pela aplicação da diretiva NgModel. Por exemplo:

O código do método onNameChange() permanece o mesmo.