Formulaire AngularJS
Un formulaire AngularJS est une collection de contrôles d'entrée.
Contrôle HTML
Les éléments d'entrée HTML suivants sont appelés contrôles HTML :
élément d'entrée
-
élément de sélection
élément de bouton
élément de zone de texte
formulaire HTML
Les formulaires HTML existent généralement avec les contrôles HTML.
Instance de formulaire AngularJS
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user }}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。 |
Analyse d'instance
ng-app La directive définit une application AngularJS. La directive
ng-controller définit le contrôleur d'application. La directive
ng-model lie deux éléments d'entrée à l'objet user du modèle. La fonction
formCtrl définit la valeur initiale de l'objet master et définit la méthode reset(). La méthode
reset() définit l'objet user égal à l'objet master. La directive
ng-click appelle la méthode reset() et est appelée lorsque l'on clique sur le bouton.
L'attribut novalidate n'est pas requis dans votre application, mais vous devez l'utiliser dans les formulaires AngularJS pour remplacer la validation HTML5 standard.