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


Notenovalidate 属性是在 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.