Item: Sample Angular Form App
Rating: 3.4
Author: 007design

3 Downloads
42 Views
Tweet
Download Now View Demo

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

More from 007design

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

Technologies

Comments

More from 007design

A Pen by Daniel Hinds-Bond

A Pen by Daniel Hinds-Bond

sticky form

Vanilla JS Lazy Load

You Might Also Like

Circular Navigation

theme anyone 2

subscription_landing

header experiment

ATK Button System

Two Way Data Binding in Plain Vanilla JavaScript

Sophia Kartoffelbrei

Special Offers