Formulaire 2

by bestmomo

HTML

<div ng-app ng-controller="controleur">
    <h1>Ajout d'utilisateurs</h1>
    <form name="ajoutUtilisateur"ng-submit="soumission(ajoutUtilisateur.$valid)">
			<label for="nom">Nom :</label>
			<input type="text" id="nom" placeholder="Entrez le nom" ng-model="user.nom" required><br>
			<label for="prenom">Prénom :</label>
			<input type="text" id="prenom" placeholder="Entrez le prénom" ng-model="user.prenom" required><br>
			<label>Rôle : </label>
			<label><input type="radio" id="actif" value="Actif" ng-model="user.role"> Actif</label>
			<label><input type="radio" id="membre" value="Membre" ng-model="user.role"> Membre</label>
		  <div ng-show="message">{{message}}</div>
		  <button type="submit">Ajouter</button>
    </form>
	<table>
		<caption>Utilisateurs</caption>
		<tr>
			<th>Nom</th>
			<th>Prénom</th>
			<th>Rôle</th>
		</tr>
		<tr ng-repeat="utilisateur in utilisateurs">
			<td>{{utilisateur.nom | uppercase}}</td>
			<td>{{utilisateur.prenom}}</td>
			<td>{{utilisateur.role}}</td>
		</tr>
	</table>
	<script>
		function controleur($scope) {
			$scope.message = '';
			$scope.utilisateurs = [];
			$scope.user = {nom: '', prenom: '', role:'Membre'};
			$scope.soumission = function (valid) {
				if(valid) {
					$scope.utilisateurs.push($scope.user);
					$scope.user = {nom: '', prenom: '', role:'Membre'};
				}
				else {
					$scope.messageClass ='alert-danger';
					$scope.message = 'Désolé mais il y a des données non valides !';
				}
			};
		}
	</script>
</div>

CSS

.ng-invalid { border-color: #B94A48; }
.ng-valid { border-color: #468847; }
table {
  	width: 100%;
}
table, tr, td {
    border: 1px solid #DDDDDD;
    border-collapse: collapse;
}