BT

AngularJS 1.3 améliore les formulaires HTML

| par David Iffland Suivre 4 Abonnés , traduit par Hadrien Pierart Suivre 0 Abonnés le 14 oct. 2014. Durée de lecture estimée: 3 minutes |

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

Donnez-nous votre avis

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

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet
Commentaires de la Communauté

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

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

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

M'envoyer un email pour toute réponse à l'un de mes messages dans ce sujet

Discuter

Contenu Éducatif

Se connecter à InfoQ pour interagir sur ce qui vous importe le plus.


Récupérer votre mot de passe

Follow

Suivre vos sujets et éditeurs favoris

Bref aperçu des points saillants de l'industrie et sur le site.

Like

More signal, less noise

Créez votre propre flux en choisissant les sujets que vous souhaitez lire et les éditeurs dont vous désirez suivre les nouvelles.

Notifications

Restez à jour

Paramétrez vos notifications et ne ratez pas le contenu qui vous importe

BT