AngularJS: Entre o ng-click e ng-submit opte pelo certo

Jura?

Parece óbvio, mas é mais comum do que pensamos. Muitas vezes presenciei situações em que me deparei com o ng-click no lugar do ng-submit. Se pensarmos bem, a ação do botão de envio de um formulário deve chamar uma determinada função, mas existem coisas, e não serve só pra esse caso — que foram feitas exatamente para outras, como é o caso do ng-submit.

Na Prática

Em um só exemplo, vamos usar ambos e assim poderemos perceber sobre suas diferenças mais claramente.

Temos o seguinte formulário:

<form name=”loginForm”>
<div>
<label class=”item item-input”>
<input type=”text” ng-model=”model.username” placeholder=”Username” required>
</label>
<label class=”item item-input”>
<input type=”password” ng-model=”model.password” placeholder=”Password” required>
</label>
</div>
<div>
<button class=”button button-assertive” ng-click=”login()”>
Login
</button>
</div>
</form>

Onde a função login() apenas mostra um log dizendo oi:

$scope.login = function() {
 console.log('Oi.');
}

E se pressionarmos o botão, veremos que a função é chamada normalmente. Mas repare que o botão chama a função mesmo com os campos vazios, e em qualquer regra de negócio que seja, não vamos querer isso.

Mas aí você me fala:

Ah Cauê, de boa, a gente faz um if/else pra verificar se os campos estão preenchidos ou não.

Mas isso é realmente necessário? Eu acho que não, e é aí que entra o ng-submit. Como? Simples: é só a gente colocar nos campos obrigatórios um required e voilà, a função não vai ser chamada e você vai ter menos trabalho.

<form name=”loginForm” ng-submit=”login()”>
<div>
<label class=”item item-input”>
<input type=”text” ng-model=”model.username” placeholder=”Username” required>
</label>
<label class=”item item-input”>
<input type=”password” ng-model=”model.password” placeholder=”Password” required>
</label>
</div>
<div>
<button class=”button button-assertive” type="submit">
Login
</button>
</div>
</form>

Tá certo que é relativamente simples fazer o if/else, mas cara, não precisa.

Sempre opte pelo modo mais correto entre o correto e o mais correto. Ou seja, pense um pouquinho a mais e veja quem você deve usar.

E aí, o que acha?

Like what you read? Give Cauê Almeida a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.