Event Binding

Bem, toda vez que o formulário for submetido, ou seja, quando botão do tipo submit de um formulário for clicado. Se estivéssemos lidando com vanilla Javascript (Javascript puro) poderíamos adicionar o código que exibe os dados da foto no evento submit. Em Angular, podemos ter acesso ao mesmo evento, mas envolvendo-o com parênteses:

<!-- alurapic/client/app/cadastro/cadastro.component.html -->
<!-- código anterior omitido -->

<form (submit)="cadastrar()" class="row">

<!-- código posterior omitido -->

Estamos também realizando uma associação aqui, mas não de dados, mas de eventos (event binding). Uma diferença desse tipo de associação para o anterior com colchetes é que a primeira flui da view para a fonte de dados e a segunda da fonte de dados para a view. Apesar de possuírem um fluxo diferente, ambas são unidirecionais.

Mas como nosso template saberá que deve chamar o método cadastrar do nosso componente a partir do evento submit? Como o template está associado ao componente, ele procurará na classe CadastroComponent, ou seja, o componente é o seu contexto.

Recarregando a página e realizando um teste vemos que a submissão do formulário faz com que ele recarregue, e não queremos isso. Queremos que o método cadastrar seja chamado sem submeter o formulário. Para isso, precisamos alterar nosso template para:

<!-- alurapic/client/app/cadastro/cadastro.component.html -->
<!-- código anterior omitido -->

<form (submit)="cadastrar($event)" class="row">

<!-- código posterior omitido -->

O $event é um objeto do Angular que encapsula o evento que esta sendo disparado. Agora, em CadastroComponent recebemos o objeto como parâmetro e executamos event.preventDefault() para cancelar a submissão do formulário, até porque ela será feita através do JavaScript:

// alurapic/client/app/cadastro/cadastro.component.ts

// código anterior omitido 

cadastrar(event) {

    event.preventDefault();
    console.log(this.foto);
}

// código posterior omitido
}

Recarregando a página e realizando um teste vemos que o método cadastrar de CadastroComponent é chamado, e como o objeto não foi preenchido, todos os campos continuam em branco.

E agora?