Université Sultan Moulay Slimane

ENSA – Khouribga
Département : Mathématiques et Informatique
Filière : Informatique et Ingénierie des Données
Module : JEE/JS
Atelier : JS
Année Universitaire : 2022/2023
Pr. Ibtissam Bakkouri

Atelier 2
Créer un formulaire de connexion en AngularJS. Le formulaire doit comporter des champs pour l'adresse
e-mail et le mot de passe, et une validation doit être effectuée pour s'assurer que les champs sont remplis.

1- Créez un nouveau module AngularJS et définissez un contrôleur pour gérer le formulaire de connexion.

var app = angular.module('myApp', []);

app.controller('LoginController', function() {
var vm = this;

vm.email = '';
vm.password = '';
vm.errorMessage = '';

vm.login = function() {
vm.errorMessage = '';

// TODO: Implement login logic

};
});

2- Ajoutez un formulaire de connexion à la vue avec des champs pour l'adresse e-mail et le mot de passe.

<form ng-submit="vm.login()">
<label>
Email:
<input type="email" ng-model="vm.email" required>
</label>
<label>
Password:
<input type="password" ng-model="vm.password" required>
</label>
<button type="submit">Log In</button>
<div>{{ vm.errorMessage }}</div>
</form>

3- Ajoutez une validation pour les champs de l'adresse e-mail et du mot de passe. Si les champs ne sont pas
remplis, affichez un message d'erreur.

<form ng-submit="vm.login()" name="loginForm" novalidate>

<label>
Email:
<input type="email" ng-model="vm.email" name="email" required>
<div ng-show="loginForm.email.$error.required">Email is required</div>
</label>
<label>
Password:
<input type="password" ng-model="vm.password" name="password" required>
<div ng-show="loginForm.password.$error.required">Password is required</div>
</label>
<button type="submit">Log In</button>
<div>{{ vm.errorMessage }}</div>
</form>

4- Mettez en place la logique de connexion dans la méthode login() du contrôleur. Pour l'instant, vous
pouvez simplement afficher un message de réussite ou d'échec.

vm.login = function() {
vm.errorMessage = '';

// TODO: Implement login logic

if (vm.email === 'test@example.com' && vm.password === 'password') {
alert('Login successful');
} else {
vm.errorMessage = 'Invalid email or password';
}
};

5- Testez le formulaire en entrant une adresse e-mail et un mot de passe valides ou invalides.