Sample Angular Form App

In this example below you will see how to do a Sample Angular Form App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 007design, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 007design ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sample Angular Form App</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div data-ng-app="app" data-ng-controller="FormCtrl">
  <div class="block-group">
    <form class="block collection-form" name="collectionForm" data-ng-show="fields">
      <div class="block-group" data-ng-repeat="field in fields">
        <span class="field block" data-ng-include="field.type"></span>
        <button class="block edit-button" data-ng-click="editField(field)">Edit Field</button>
      </div>
      <button type="submit" data-ng-click="save()" data-ng-disabled="collectionForm.$invalid">Save</button>
    </form>
    <div class="block saved-list">
      <div class="saved-row" data-ng-repeat="form in saved" data-ng-click="editForm(form)">{{form.date_submitted | date:'medium'}}</div>
    </div>
  </div>
  
  <div class="block-group new-field">
    <form name="newFieldForm" data-ng-controller="NewFieldCtrl">
      <input type="text" data-ng-model="newField.id" placeholder="Unique ID" required data-ng-disabled="fields[newField.id]" />
      <input type="text" data-ng-model="newField.name" placeholder="Field Name" required />
      <select data-ng-model="newField.type" required>
        <option value="">Field Type</option>
        <option value="text_field">text</option>
        <option value="select_field">select</option>
        <option value="radio_field">radio</option>
        <option value="checkbox_field">checkboxes</option>
      </select>
      <label><input type="checkbox" data-ng-model="newField.required" />Required</label>
      <button data-ng-disabled="newFieldForm.$invalid" data-ng-click="addField()">Save</button>

      <div class="select-inputs" data-ng-show="newField.type && newField.type != 'text_field'">
        <div data-ng-repeat="option in newField.options"><input type="text" data-ng-model="option" /></div>
        <input type="text" data-ng-model="newFieldOption" placeholder="Field Option" />
        <button data-ng-click="addFieldOption()">Add Option</button>
      </div>
    </form>
  </div>
  
  <script type="text/ng-template" id="text_field">
  	<input type="text" placeholder="{{field.name}}" data-ng-model="form[field.id]" data-ng-required="field.required" />
  </script>
  
  <script type="text/ng-template" id="select_field">
  	<select data-ng-model="form[field.id]" data-ng-options="option for option in field.options" data-ng-required="field.required">
      <option value="">{{field.name}}</option>
    </select>
  </script>
  
  <script type="text/ng-template" id="radio_field">
  	{{field.name}}
    <label data-ng-repeat="option in field.options"><input type="radio" data-ng-model="form[field.id]" value="{{option}}" />{{option}}</label>
  </script>
  
  <script type="text/ng-template" id="checkbox_field">
  	{{field.name}}
    <label data-ng-repeat="option in field.options"><input type="checkbox" data-ng-model="form[field.id][$index]" value="{{option}}" />{{option}}</label>
  </script>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/sample-angular-form-app-XKaXdQ */
/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
/* Border-box-sizing */
.block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix */
.block-group {
  *zoom: 1;
}

.block-group:before, .block-group:after {
  display: table;
  content: "";
  line-height: 0;
}

.block-group:after {
  clear: both;
}

.block-group {
  /* ul/li compatibility */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Nested grid */
.block-group > .block-group {
  clear: none;
  float: left;
  margin: 0 !important;
}

/* Default block */
.block {
  float: left;
  width: 100%;
}

.field,
.edit-button,
.collection-form,
.saved-list {
  width: 50%;
}

.saved-row {
  padding: 0.5em;
  border-bottom: 1px solid black;
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/007design/sample-angular-form-app-XKaXdQ */
angular.module('app', [])
.service('fieldSvc', [function() {
  return this;
}])
.service('savedSvc', [function() {
  return this;
}])
.controller('FormCtrl', ['$scope', 'fieldSvc', 'savedSvc', function($scope, fieldSvc, savedSvc) {
  $scope.$watch(function() {
    return fieldSvc.fields;
  }, function(f) {
    $scope.fields = f;
  });
  
  $scope.$watch(function() {
    return savedSvc.data;
  }, function(s) {
    $scope.saved = s;
  });
  
  $scope.form = {};
  
  $scope.editForm = function(form) {
    $scope.form = form;
  };
  
  $scope.editField = function(field) {
    $scope.$broadcast('editField', field);
  };
  
  $scope.save = function() {
    savedSvc.data = savedSvc.data || [];
    $scope.form.date_submitted = new Date();
    savedSvc.data.push($scope.form);
    $scope.form = {};
  };
}])
.controller('NewFieldCtrl', ['$scope', 'fieldSvc', function($scope, fieldSvc) {
  $scope.$on('editField', function(evt, args) {
    $scope.newField = args;
  });
  
  $scope.addField = function() {
    fieldSvc.fields = fieldSvc.fields || {};
    fieldSvc.fields[$scope.newField.id] = $scope.newField;
    $scope.newField = {};
    $scope.newFieldOption = '';
  };
  
  $scope.addFieldOption = function() {
    $scope.newField.options = $scope.newField.options || [];
    $scope.newField.options.push($scope.newFieldOption);
    $scope.newFieldOption = '';
  };
}]);

Comments