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
![Page 1: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/1.jpg)
Validação
![Page 2: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/2.jpg)
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
![Page 3: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/3.jpg)
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
![Page 4: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/4.jpg)
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>
![Page 5: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/5.jpg)
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”
![Page 6: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/6.jpg)
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”
![Page 7: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/7.jpg)
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”
![Page 8: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/8.jpg)
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”
![Page 9: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/9.jpg)
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”
![Page 10: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/10.jpg)
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
![Page 11: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/11.jpg)
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?
![Page 12: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/12.jpg)
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
![Page 13: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/13.jpg)
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
![Page 14: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/14.jpg)
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
![Page 15: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/15.jpg)
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); }; })
![Page 16: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/16.jpg)
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>
![Page 17: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/17.jpg)
Mas tudo isso vai gerando muito código, por isso vamos usar o ngMessages
![Page 18: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/18.jpg)
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>
![Page 19: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/19.jpg)
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>
![Page 20: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/20.jpg)
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
![Page 21: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/21.jpg)
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>
![Page 22: Angular jumpstart 7 - Validação](https://reader036.vdocuments.com.br/reader036/viewer/2022062405/55666819d8b42aa21e8b5171/html5/thumbnails/22.jpg)
Wesley A.LemosLages/SC - 2014