À propos de l'analyse des formulaires AngularJs
Cet article présente principalement les formulaires AngularJs. Ici, nous avons compilé des informations pertinentes et des exemples de codes simples. Les amis dans le besoin peuvent s'y référer
Les contrôles (saisie, sélection, zone de texte) sont un moyen pour les utilisateurs de saisir des données. . Un formulaire est une collection de ces contrôles conçus pour regrouper les contrôles associés.
Les formulaires et les contrôles fournissent des services de validation, afin que les utilisateurs puissent recevoir des invites en cas de saisie non valide. Cela offre une meilleure expérience utilisateur car les utilisateurs peuvent obtenir un retour immédiat et savoir comment corriger les erreurs. Gardez à l’esprit que même si la validation côté client joue un rôle important pour offrir une bonne expérience utilisateur, elle peut être facilement contournée et, par conséquent, on ne peut pas lui faire confiance. L'authentification côté serveur est toujours nécessaire pour une application sécurisée.
1. Formulaire simple
La directive clé pour comprendre la liaison de données bidirectionnelle est ngModel. ngModel fournit une liaison de données bidirectionnelle du modèle à la vue et de la vue au modèle. De plus, il fournit également des API à d'autres directives pour améliorer leur comportement.
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="SimpleForm">
<head>
<meta charset="UTF-8">
<title>PropertyEvaluation</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<p ng-controller="MyCtrl" class="ng-cloak">
<form novalidate>
名字: <input ng-model="user.name" type="text"><br/>
Email: <input ng-model="user.email" type="email"><br/>
性别: <input value="男" ng-model="user.gender" type="radio">男
<input value="女" ng-model="user.gender" type="radio">女
<br/>
<button ng-click="reset()">还原上次保存</button>
<button ng-click="update(user)">保存</button>
</form>
<pre class="brush:php;toolbar:false">form = {{user | json}}
saved = {{saved | json}}