Angular JS Magazine

duminică, 31 august 2014

Angular and Form Elements - part 3

In Angular and Form Elements - part 2 we have introduced a form with Angular validation capabilities. Further, we have modified this form to support CSS notifications for valid and invalid data. In order to accomplish this task, we need to specify the classes used by AngularJS Validation - actually we just need to shape the CSS code because Angular will automatically add the form elements to the right class depending on their validity status:

ng-pristine = elements that the user has not interacted are added to this class
ng-dirty = elements that the user has interacted are added to this class
ng-valid = elements that are valid are added in this class
ng-invalid = elements that are invalid are added in this class

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.addNewPlayer = function (newPlayer) {
                        if (angular.isDefined(newPlayer)) {
                            $scope.atp.push({name: newPlayer.name, email: newPlayer.email,
                                                        rank: $scope.atp.length + 1});
                        }
                    };
                });
    </script>
    <style>
        form .ng-invalid.ng-dirty { background-color: coral; }
        form .ng-valid.ng-dirty { background-color: lightcyan; }
    </style>
</head>
<body>
<div ng-app="atpModule" ng-controller="atpCtrl" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', email: 'nadalrafael@gmail.com', rank: 1 },
     { name: 'Djokovic, Novak (SRB)', email: 'djokovicnovak@gmail.com', rank: 2 },
     { name: 'Federer, Roger (SUI)', email: 'federerroger@gmail.com', rank: 3 },
     { name: 'Wawrinka, Stan (SUI)', email: 'wawrinkastan@gmail.com', rank: 4 },
     { name: 'Ferrer, David (ESP)', email: 'ferrerdavid@gmail.com', rank: 5 }]">

    <div id="atpPanel" class="panel">
        <h3 class="panel-header">ATP SINGLES RANKINGS</h3>
        <table class="table">
            <thead>
            <tr>
                <th>Name</th>
                <th>E-mail</th>
                <th>Rank</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.rank}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-xs-6">
        <form name="atpForm" novalidate ng-submit="addNewPlayer(player)">
            <div class="well">
                <div class="form-group row">
                    <label for="playerNameId">Player Name:</label>
                    <input id="playerNameId" type="text" class="form-control"
                              ng-model="player.name" required>
                </div>
                <div class="form-group row">
                    <label for="playerEmailId">Player E-mail:</label>
                    <input id="playerEmailId" type="email" class="form-control"
                              ng-model="player.email" required>
                </div>
                <div class="form-group row">
                    <label for="playerRankId">Player Rank:</label>
                    <span id="playerRankId">{{atp.length + 1}}</span>
                </div>
                <button class="btn btn-primary btn-block" ng-disabled="atpForm.$invalid">
                    Add Player
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

Form contains invalid fields:

Form contains only valid fields: