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

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

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>