BT

Accueil InfoQ Actualités AngularJS 1.3 améliore les formulaires HTML

AngularJS 1.3 améliore les formulaires HTML

Favoris

La prochaine mise à jour d'AngularJS 1.3 se concentre sur l'amélioration des opérations de formulaires. Bien que cette version apporte de vraies solutions, pour certains développeurs, la migration pourrait ne pas être automatique.

L'équipe AngularJS a commencé à publier des versions candidates pour la version 1.3. Dans un article sur Google+, l'équipe a écrit :

La majeure partie de l'API pour la 1.3 est décidée et les prochaines publications jusqu'à la 1.3.0 stable serviront à fixer les bugs restants.

Parmi les nouvelles fonctionnalités de cette 1.3, on trouve :

  • un nouveau système de validateurs
  • des validateurs asynchrones personnalisés
  • des options de data binding pour le modèle
  • un module ngMessages pour réutiliser les messages d'erreur
  • le support du data binding simple (une seule fois)

Cette nouvelle version apporte des validateurs personnalisés aux développeurs, permettant de s'affranchir des parsers et formatters. Pour créer un validateur personnalisé, le développeur doit l'enregistrer auprès de $validators et renvoyer true ou false :

ngModule.directive('validateLessthanfive', function() {

  return {
    require : 'ngModel',
    link : function($scope, element, attrs, ngModel) {
      ngModel.$validators.lessthanFive = function(value) {
        return (value < 5);
      };
    }
  }
});

Matias Niemela, un contributeur Angular, a rédigé un article détaillé sur les nouvelles fonctionnalités des formulaires dont la nouvelle fonctionnalité de validateurs asynchrones permettant d'avoir une validation basée sur le serveur. Matias insiste également sur l'amélioration du support des validateurs HTML5 :

Maintenant, tous les attributs de validation HTML5 sont correctement associés au ngModel et les erreurs sont enregistrées auprès du ngModel.$error lorsque la validation échoue.

L'équipe Angular a introduit des changements cassant avec la version 1.3, que certains développeurs ont estimé faire partie d'une version majeure comme la 2.0. Dans un commit GitHub récent, Chad Moran, Responsable Développement logiciel chez Woot, prévient que :

Faire de tels changements cassant et sans passer à la version majeure suivante a de fortes chances de beaucoup déranger les utilisateurs.

Un changement majeur qui risque de beaucoup déranger les développeurs en entreprise est que la 1.3 ne supporte plus IE8. Les développeurs ont été largement prévenus par l'équipe Angular depuis cet article de blog en décembre 2013. Le raisonnement derrière ce choix est que la 1.3 ne supporte plus que jQuery 2.1 ou supérieur et que jQuery a abandonné le support d'IE8 pour les versions 2.x.

Dans les précédentes versions d'Angular, faire afficher des messages de validation de formulaire était un exercice périlleux combinant des directives ng-if et de nombreux booléens pour faire afficher le bon message d'erreur au bon moment. La version 1.3 apporte le module ngMessages qui facilite grandement la gstion de messages de validation complexe. Un exemple de cette nouvelle syntaxe extrait de l'article de blog de yearofmoo.com :

<form name="myForm">
  <input type="text" name="colorCode" ng-model="data.colorCode" minlength="6" required />
  <div ng-messages="myForm.colorCode.$error" ng-if="myForm.$submitted || myForm.colorCode.$touched">
        <div ng-message="required">...</div>
        <div ng-message="minlength">...</div>
        <div ng-message="pattern">...</div>
  </div>
</form>

Selon Niemela, au delà de réduire le nombre de lignes de code, ce nouveau module résoud les problèmes complexes "de messages devant s'afficher avant d'autres".

Ce n'est pas encore clair quand la 1.3.0 sera en version stable, mais pour la version 1.2, le développement s'est étalé sur 3 mois et 3 releases candidates. Pour le moment, il y a déjà 3 releases candidates en 3 semaines pour la 1.3. Au delà de la 1.3 se trouve la 2.0 qui, selon un article de l'équipe Angular, se concentre sur faire d'Angular "un framework pour les applications mobiles".

AngularJS est un framework JavaScript créé par Google.

Evaluer cet article

Pertinence
Style

Bonjour étranger!

Vous devez créer un compte InfoQ ou cliquez sur pour déposer des commentaires. Mais il y a bien d'autres avantages à s'enregistrer.

Tirez le meilleur d'InfoQ

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Commentaires de la Communauté

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

Html autorisé: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Votre profil est-il à jour? Merci de prendre un instant pour vérifier.

Note: en cas de modification de votre adresse email, une validation sera envoyée.

Nom de votre entreprise:
Rôle dans votre entreprise:
Taille de votre entreprise:
Pays/Zone:
État/Province/Région:
Vous allez recevoir un email pour confirmer la nouvelle adresse email. Ce pop-up va se fermer de lui-même dans quelques instants.