angular jumpstart 7 - validação
DESCRIPTION
Curso ministrado por mim na NDDigital sobre como iniciar uma aplicação AngularJS direcionada ao consumo de WebAPI, baseado neste fluxo: https://www.examtime.com/pt-BR/p/1084807 ::Table of Contents 1 - Introdução http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785 2 - Arquitetura http://pt.slideshare.net/anisanwesley/angular-jumpstart-2-arquitetura 3 - Controllers http://pt.slideshare.net/anisanwesley/angular-jumpstart-3-controllers 4 - Diretivas nativas http://pt.slideshare.net/anisanwesley/angular-jumpstart-4-diretivas-nativas 5 - Diretivas customizadas http://pt.slideshare.net/anisanwesley/angular-jumpstart-5-diretivas-customizadas 6 - Filters http://pt.slideshare.net/anisanwesley/angular-jumpstart-6-filters 7 - Validação http://pt.slideshare.net/anisanwesley/angular-jumpstart-7-validao 8 - Services http://pt.slideshare.net/anisanwesley/angular-jumpstart-8-services 9 - Modulos http://pt.slideshare.net/anisanwesley/angular-jumpstart-9-modulos 10 - Requests http://pt.slideshare.net/anisanwesley/angular-jumpstart-10-requests 11 - Roteamento http://pt.slideshare.net/anisanwesley/angular-jumpstart-11-roteamentoTRANSCRIPT
Validação
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
Validação Angular tem um carinho especial com a tag <form>
Apenas por ter Angular referenciado no projeto, o form já tem automaticamente:
Classes CSS
TratativasValidador
es
Viewmodels
Validação
<form class="ng-pristine ng-valid"></form>
O Angular aciona e remove classes de acordo com o estado do form:
<form class="ng-dirty ng-invalid"></form>
<form class="ng-dirty ng-valid"></form>
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
<in
put>
ng-dirty
ng-invalid
ng-invalid-email
ng-invalid-required
ng-pristine
ng-valid-email
Todas as classes têm este formato: “ng-status-especificação”
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
<in
put>
ng-dirty
ng-invalid
ng-invalid-email
ng-invalid-requiredng-valid-require
Todas as classes têm este formato: “ng-status-especificação”
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
<in
put>
ng-dirty
ng-invalid
ng-invalid-email
ng-invalid-required
ng-valid
ng-valid-email
ng-valid-require
Todas as classes têm este formato: “ng-status-especificação”
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
<in
put>
ng-dirty
ng-invalid
ng-invalid-email
ng-invalid-requiredng-valid-require
Todas as classes têm este formato: “ng-status-especificação”
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
<in
put>
ng-dirty
ng-invalid
ng-invalid-email
ng-invalid-required
ng-valid-email
Todas as classes têm este formato: “ng-status-especificação”
Validação
<form name="form"> <input type='email' ng-model="user.email" required/></form>
input.ng-invalid.ng-dirty { border-color: red; } input.ng-valid { border-color: green; } input.ng-pristine { border-color: blue; }
Use estas classes para dar coloração aoselementos
Validação
<form name="form"> <input type='email' ng-model="user.email" required/>
</form>
<span ng-show="form.email.$invalid">Inválido!</span>
Diferentes mensagens
Mas qual é o erro
especifico?
Validação
<form name="form"> <input type='email' ng-model="user.email" required/> <span ng-show="form.email.$error.required"> Obrigatório </span> <span ng-show="form.email.$error.email"> Formato Incorreto </span> </form>
Diferentes mensagens
Validação
<input type="password" name="password" ng-model="user.password“ required ng-minlength="5" ng-maxlength="10" /> <span ng-show="form.password.$error.required"> Obrigatorio </span> <span ng-show="form.password.$error.minlength"> Muito pequeno </span> <span ng-show="form.password.$error.maxlength"> Muito grande </span>
Apenas se necessário
Validação
<input type="password" name="password" ng-model="user.password“ required ng-minlength="5" ng-maxlength="10" />
<span ng-show="form.password.$dirty && form.password.$error.required"> Obrigatorio </span> <span ng-show="form.password.$dirty && form.password.$error.minlength"> Muito pequeno </span> <span ng-show="form.password.$dirty && form.password.$error.maxlength"> Muito grande </span>
Apenas se necessário
ValidaçãoSubmit
<body ng-app="core.module">
<div> <form name="form"> {...}
<button ng-disabled="form.$invalid">Login</button> </form> </div></body>
<form name="form" ng-submit="vm.evaluate(user)"><div ng-controller="formController as vm">
angular.module('core.module', []) .controller('formController',function() { this.evaluate = function(user) { console.log(user); }; })
ValidaçãoCustomizando
.directive('major', function () { return { require: 'ngModel', link:function(scope, elm, attrs, validator) { validator.$parsers.unshift(function(value) { if (value >= 18) { validator.$setValidity('major', true); return value; } else { validator.$setValidity('major', false); return undefined; } }); } };
<label>Idade:</label> <input type="number" name="age" ng-model="user.age" major required/> <span ng-show="form.age.$error.major"> Deve ser 18+ </span>
Mas tudo isso vai gerando muito código, por isso vamos usar o ngMessages
ngMessages<div ng-controller="formController as vm"> <form name="form" ng-submit="vm.evaluate(user)"> <div> <label>Email:</label> <input type="email" name="email" ng-model="user.email" required /> <span ng-show="form.email.$dirty && form.email.$error.required"> Obrigatório </span> <span ng-show="form.email.$dirty && form.email.$error.email"> Formato Incorreto </span> </div>
<div>
<label>Idade:</label> <input type="number" name="age" ng-model="user.age" major required /> <span ng-show="form.age.$error.major"> Deve ser 18+ </span> </div>
<div> <label>Password:</label> <input type="password" name="password" ng-model="user.password“ required ng-minlength="5“ ng-maxlength="10" /> <span ng-show="form.password.$dirty && form.password.$error.required"> Obrigatorio </span> <span ng-show="form.password.$dirty && form.password.$error.minlength"> Muito pequeno </span> <span ng-show="form.password.$dirty && form.password.$error.maxlength"> Muito grande </span> </div> <button ng-disabled="form.$invalid">Login</button> </form> </div>
ngMessages<div ng-controller="formController as vm"> <form name="form" ng-submit="vm.evaluate(user)"> <div>
<label>Idade:</label>
<label>Password:</label>
<button ng-disabled="form.$invalid">Login</button> </form> </div>
<script src="../angular-messages.js"></script> angular.module('core.module', ['ngMessages'])
<div> <label>Email:</label> <input type="email" name="email" ng-model="user.email" required /> <div ng-messages="form.email.$error"> <div ng-message="required">Obrigatório</div> <div ng-message="email">Formato Incorreto</div> </div> </div>
<input type="number" name="age" ng-model="user.age" major required /> <div ng-messages="form.age.$error"> <div ng-message="major">Deve ser 18+</div> </div>
<input type="password" name="password" ng-model="user.password“ required ng-minlength="5" ng-maxlength="10" /> <div ng-messages="form.password.$error"> <div ng-message="required">Obrigatório</div> <div ng-message="minlength">Muito pequeno</div> <div ng-message="maxlength">Muito grande</div> </div>
ngMessagesReutilizando
<div ng-message="required">Obrigatório</div> <div ng-message="email">Formato Incorreto</div> <div ng-message="major">Deve ser 18+</div> <div ng-message="minlength">Muito pequeno</div> <div ng-message="maxlength">Muito grande</div>
error-messages.html
<div> <label>Email:</label> <input type="email" name="email" ng-model="user.email" required /> <div ng-messages="form.email.$error" ng-include="'error-messages.html'"> </div>
view
ngMessages
<div ng-controller="formController as vm"> <form name="form" ng-submit="vm.evaluate(user)"> <div> <label>Email:</label> <input type="email" name="email" ng-model="user.email" required /> <div ng-messages="form.email.$error" ng-include="'error-messages.html'"> <div> <label>Idade:</label> <input type="number" name="age" ng-model="user.age" major required /> <div ng-messages="form.age.$error" ng-include="'error-messages.html'"> </div> <div> <label>Password:</label> <input type="password" name="password" ng-model="user.password“ required ng-minlength="5" ng-maxlength="10" /> <div ng-messages="form.password.$error" ng-include="'error-messages.html'"> </div> <button ng-disabled="form.$invalid"">Login</button> </form> </div>
Wesley A.LemosLages/SC - 2014