O exemplo abaixo trabalha com o elemento form
para gerenciar validações de conteúdo.
Note que ele recebe um nome, userForm
. Isso é importante porque o Angular tando adiciona uma menção ao formulário ao escopo do controller quanto funcionalidades para checar a causa dos erros de validação.
Cada controle também tem a sua propriedade name preenchida. No exemplo eu utilizei o mesmo nome utilizado no ng-model
.
Você pode então utilizar:
- [nomeDoFormulario].[nomeDoCampo].$valid
- para determinar se aquele campo é válido;
- [nomeDoFormulario].[nomeDoCampo].$error
- para acessar a justificativa do erro de validação do campo.
- [nomeDoFormulario].$valid
- para verificar se o formulário não possui nenhum outro erro de validação.
var playlistApp = angular.module('playlistApp', []);
playlistApp.controller("LucasCtrl", ['$scope', function($scope) {
$scope.validarCampos = function() {
if ($scope.userForm.$valid) {
alert('Seu formulário está corretamente preenchido.');
}
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body ng-app="playlistApp" ng-controller="LucasCtrl">
<div class="container">
<div class="row">
<div class="col-md-6">
<form name="userForm" ng-submit="validarCampos()" novalidate class="form">
<table>
<tr>
<td class="border-bottom" ng-class="{'border-success': userForm.nome.$valid, 'border-warning': userForm.nome.$invalid}">
Nome
</td>
<td><input type="text" class="form-control" name="nome" ng-model="nome" required></td>
</tr>
<tr>
<td class="border-bottom" ng-class="{'border-success': userForm.idade.$valid, 'border-warning': userForm.idade.$invalid}">
Idade
</td>
<td><input type="number" class="form-control" name="idade" ng-model="idade" min="18"></td>
</tr>
<tr>
<td class="border-bottom" ng-class="{'border-success': userForm.endereco.$valid, 'border-warning': userForm.endereco.$invalid }">
Endereço
</td>
<td><input type="text" class="form-control" name="endereco" ng-model="endereco" ng-minlength="3"></td>
</tr>
<tr>
<td class="border-bottom" ng-class="{'border-success': userForm.telefone.$valid, 'border-warning': userForm.telefone.$invalid }">
Telefone de contato
</td>
<td><input type="text" class="form-control" name="telefone" ng-model="telefone"></td>
</tr>
<tr>
<td colspan=2><input type="submit" value="Próximo >" class="btn btn-success pull-right" ng-disabled="!userForm.$valid"/></td>
</tr>
<table>
<div ng-show="userForm.nome.$error.required">O campo nome é mandatório.</div>
<div ng-show="userForm.idade.$error.min">Se informada, a idade deve ser maior ou igual a 18 anos.</div>
<div ng-show="userForm.endereco.$error.minlength">Se informado, o endereço deve possuir no mínimo 20 caracteres.</div>
</form>
</div>
</div>
</div>
</div>
</body>