Focus sur les formulaires AngularJS – Anime la page HTML5 * CSS3 - ʕ๏๏ʔ – et la communauté HTML5 * CSS3 [FR]



Focus sur les formulaires AngularJS – Anime la page HTML5 * CSS3 - ʕ๏๏ʔ – et la communauté HTML5 * CSS3 [FR]

0 0


slides-prez-angular-form


On Github lauterry / slides-prez-angular-form

Focus sur les formulaires AngularJS

presenté par LAU Thierry - @laut3rry

front-end developer

Anime la page HTML5 * CSS3 - ʕ๏๏ʔ

et la communauté HTML5 * CSS3 [FR]

Validation côté client

Feedbacks instantanées

Moins de requêtes

Meilleure UX

http://www.wufoo.com/html5/
http://www.wufoo.com/html5/

ng-model

input, textarea, select

Data Binding

    <input type="text" ng-model="name">
                        

Validations

                            <input type="email" ng-model="user.mail">
                        
    <input ng-model="name"
              required
              ng-minlength="3"
              ng-maxlength="10"
              ng-pattern="[^a-d]"
            >
                        

Etat

  • $pristine
  • $dirty
  • $valid
  • $invalid
  • $error

Validation manuelle

$setValidity(validationErrorKey, isValid)

  • validationErrorKey : nom de la règle de validation
    • required
    • email
    • min
    • maxlength
  • isValid : true ou false
     $setValidity('email', false)       // email invalide
                 

form

Ensemble d'inputs

Etat

  • $pristine
  • $dirty
  • $valid
  • $invalid
  • $error

{{ DEMO }}

Définissez vos propres attributs de validation

Directives

        <input type="text" ng-model="address" address>
        <input type="url" ng-model="website" authorized>
    

Merci de votre attention !

twitter : @laut3rry

google + : gplus.to/lauthierry