| <html lang="en" ng-app="web-app"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple Form / List</title> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body ng-controller="FormCtrl"> | |
| <!-- Start Page Header --> | |
| <div class="page-header"> | |
| <h1>Simple Form / List</h1> | |
| <p class="lead"> | |
| Start with clicking <button class="btn btn-xs btn-primary" disabled><span class= "glyphicon glyphicon-plus"></span> Add Person</button> | |
| to add a person to the list | |
| </p> | |
| </div> | |
| <!-- End Page Header --> | |
| <!-- Start Row --> | |
| <div class="row"> | |
| <!-- Start Side Div --> | |
| <aside class="col-xs-3"> | |
| <div class='input-group'> | |
| <input class="form-control" type="text" ng-model="search.$"> | |
| <span class="input-group-btn"> | |
| <button class="btn btn-success" type="button" disabled> | |
| <span class="glyphicon glyphicon-search"></span> | |
| </button> | |
| </span> | |
| </div><br> | |
| <a class="btn btn-block btn-primary" data-target="#basicModal" data-toggle="modal" href="#"><span class="glyphicon glyphicon-plus"></span> Add Person</a> | |
| </aside> | |
| <!-- End Side Div --> | |
| <!-- Start Person Table --> | |
| <div class="container col-xs-9"> | |
| <table class="table table-striped col-xs-12" id="searchObjResults"> | |
| <tr> | |
| <th>Date Submitted</th> | |
| <th>Name</th> | |
| <th>Email</th> | |
| <th>Action</th> | |
| </tr> | |
| <tr ng-repeat="item in list | filter:search:strict"> | |
| <td>{{item.sub_date | date:'MM-dd-yyyy'}}</td> | |
| <td>{{item.name}}</td> | |
| <td>{{item.email}}</td> | |
| <td class="col-xs-2"> | |
| <button class="btn btn-danger btn-sm" type="button" ng-click="removePerson($index)"><span class="glyphicon glyphicon-remove"></span> Delete</button> | |
| </td> | |
| </tr> | |
| <tr><td colspan="4" ng-show='list.length == 0'>No people listed...</td></tr> | |
| <tr><td colspan="4" ng-show='list == undefined'>Loading...</td></tr> | |
| </table> | |
| </div> | |
| <!-- End Person Table --> | |
| </div> | |
| <!-- End Row --> | |
| <!-- Start Modal Window --> | |
| <div class="modal fade modal-dialog modal-content" id="basicModal" tabindex="-1"> | |
| <div class="modal-header"> | |
| <button class="close" data-dismiss="modal" type="button">×</button> | |
| <h4 class="modal-title" id="myModalLabel">Add Person</h4> | |
| </div> | |
| <!-- Start Form --> | |
| <div ng-form class="form-horizontal" id="css" role="form" name="personForm"> | |
| <div class="modal-body"> | |
| <!-- Start Name --> | |
| <div class="form-group" ng-class="{ 'has-error' : errors.form_error == true && personForm.name.$invalid == true }"> | |
| <label class="col-sm-2 control-label" for="name">Name</label> | |
| <div class="col-sm-10"> | |
| <input class="form-control" id="name" name="name" ng-model="form.name" placeholder="Name" type="text" required > | |
| <span class="help-block error" ng-show="errors.form_error == true && personForm.name.$invalid == true">Please input a valid name</span> | |
| </div> | |
| </div> | |
| <!-- End Name --> | |
| <!-- Start Email --> | |
| <div class="form-group" ng-class="{ 'has-error' : (errors.form_error == true && personForm.email.$invalid == true) || (errors.form_error == true && errors.email == true) }"> | |
| <label class="col-sm-2 control-label" for="email">Email</label> | |
| <div class="col-sm-10"> | |
| <input class="form-control" id="email" name="email" ng-model="form.email" ng-pattern="email_regexp" placeholder="Email" type="email" required> | |
| <span class="help-block error" ng-show="errors.form_error == true && personForm.email.$invalid && errors.email != true">Please input a valid email address ([email protected])</span> | |
| <span class="help-block error" ng-show="errors.form_error == true && errors.email == true">The email address you provided is already in the system. Please input a different email or contact your system admin.</span> | |
| </div> | |
| </div> | |
| <!-- End Email --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-default" data-dismiss="modal" type="button">Close</button> | |
| <button class="btn btn-success" type="button" ng-click="submitForm(form)">Submit</button> | |
| </div> | |
| </div> | |
| <!-- End Form --> | |
| </div> | |
| <!-- End Modal Window --> | |
| </body> | |
| </html> |
| angular.module('web-app', [ ]); | |
| // create angular controller | |
| function FormCtrl($scope, $filter) { | |
| //Regex for the email ng-pattern | |
| $scope.email_regexp = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; | |
| //Beginning list of people | |
| $scope.list = [ | |
| {'sub_date':'1405123557521', 'name': 'Stirling Waite', 'email':'[email protected]'} | |
| ]; | |
| // Function to submit the form after all validation has occurred | |
| $scope.submitForm = function (form) { | |
| var errors = $scope.errors = {}; | |
| // Checks to make sure the form is completely valid | |
| var errors = Verify($scope); | |
| //If no errors it pushed the object onto the list array, clears the form, and closes the modal | |
| //If errors exist it displays errors to user | |
| if (Object.keys(errors).length === 0) { | |
| form.sub_date = Date.now(); | |
| $scope.list.push(form); | |
| $scope.form = $scope.errors = errors = {}; | |
| $('#basicModal').modal('toggle'); | |
| }else{ | |
| $scope.errors = errors; | |
| } | |
| } | |
| //Removes the person from the list | |
| $scope.removePerson = function (index) { | |
| $scope.list.splice(index,1); | |
| } | |
| } | |
| //Function for validation of the form | |
| function Verify($scope) { | |
| var errors = {}; | |
| var exists = emailExists($scope); | |
| //Checks to see if any values in form | |
| if($scope.form === undefined) | |
| errors.form_error = true; | |
| //Checks to see if any invalids exist in the form | |
| if($scope.personForm.$invalid) | |
| errors.form_error = true; | |
| //Checks to see if email already exists in the list | |
| if(exists){ | |
| errors.form_error = true; | |
| errors.email = true; | |
| } | |
| return errors; | |
| } | |
| //Function to allow me to see if the person's email in the form already exists | |
| function emailExists($scope) { | |
| if($scope.form !== undefined){ | |
| var email = $scope.form.email; | |
| return $scope.list.some(function(el) { | |
| return el.email === email; | |
| }); | |
| } | |
| } |
A single web page application using AngularJS. It contains a form within a modal window that has validation. It also lists the people added via the form.
Given more time I would add a directive to search people/dates on the list, orderby, and pagination. It would also have a RemoteService Factory that fetches remote data sources and returns a promise.
See this code in action at CodePen.io
| /* Importing Twitter Bootstrap */ | |
| @import "//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/flatly/bootstrap.min.css"; | |
| /* Displays better */ | |
| body { | |
| padding:10px 40px 40px 40px; | |
| background-color:#eee | |
| } | |
| /* Invalid input text */ | |
| .error { | |
| color:red | |
| } |