Skip to content

Instantly share code, notes, and snippets.

@winkerVSbecks

winkerVSbecks/Angular Form Generator.markdown

Created July 23, 2015 13:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save winkerVSbecks/324f74c0ec013d925321 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save winkerVSbecks/324f74c0ec013d925321 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Form Generator
Raw
index.html
<body ng-app="formExample" class="p2">
<script id="customInput.html" type="text/ng-template">
<div>
<label>{{ ctrl.label }}</label><br/>
<input class="block col-12 mb1 field"
type="text"
name="{{ ctrl.fieldName }}"
ng-model="ctrl.modelObj"
ng-model-options="{ debounce: 300 }"
ng-minLength="ctrl.minLength"
ng-maxLength="ctrl.maxLength"
required>
<ng-transclude></ng-transclude>
</div>
</script>
<script id="error-messages" type="text/ng-template">
<div class="center p1 white bg-red rounded"
ng-message="minlength">
Your field is too short
</div>
<div class="center p1 white bg-red rounded"
ng-message="maxlength">
Your field is too long
</div>
<div class="center p1 white bg-red rounded"
ng-message="required">
You did not enter a field
</div>
</script>
<script id="form-builder.html" type="text/ng-template">
<ng-switch ng-repeat="field in ctrl.fields"
on="field.type">
<div ng-switch-when="textField">
<text-field model-obj="field.model"
label="{{field.label}}"
field-name="{{field.name}}"
min-length="{{ field.minLength }}"
max-length="{{ field.maxLength }}">
</text-field>
</div>
<div ng-switch-default class="border p1"> In-valid input type specified</div>
</ng-switch>
</script>
<script id="form-error-messages.html" type="text/ng-template">
<div ng-repeat="field in formCtrl.formDef"
ng-messages="myForm[field.name].$error"
ng-if="myForm[field.name].$touched"
role="alert">
<div class="center p1 mb1 white bg-red rounded"
ng-message="minlength">
{{ field.label }} is too short
</div>
<div class="center p1 mb1 white bg-red rounded"
ng-message="maxlength">
{{ field.label }} is too long
</div>
<div class="center p1 mb1 white bg-red rounded"
ng-message="required">
You did not enter {{ field.label }}
</div>
</div>
</script>
<h3 class="border-bottom py1 mb3">Composed Form Example</h3>
<form class="sm-col-6 mb4"
name="myForm"
ng-controller="FormController as formCtrl">
<text-field model-obj="formCtrl.firstName"
form-name="myForm"
label="First Name"
field-name="firstName">
<div ng-messages="myForm.firstName.$error"
ng-if="myForm.firstName.$touched"
role="alert">
<div ng-messages-include="error-messages"></div>
</div>
</text-field>
<text-field model-obj="formCtrl.lastName"
form-name="myForm"
label="Last Name"
field-name="lastName">
<div ng-messages="myForm.lastName.$error"
ng-if="myForm.lastName.$touched"
role="alert">
<div ng-messages-include="error-messages"></div>
</div>
</text-field>
<text-field model-obj="formCtrl.username"
form-name="myForm"
label="Username"
field-name="username">
<div ng-messages="myForm.username.$error"
ng-if="myForm.username.$touched"
role="alert">
<div ng-messages-include="error-messages"></div>
</div>
</text-field>
</form>
<h3 class="border-bottom py1 mb3">Dynamic Form Example</h3>
<form class="sm-col-6"
name="myForm"
ng-controller="FormController as formCtrl">
<ng-include src="'form-error-messages.html'"></ng-include>
<form-builder fields="formCtrl.formDef"></form-builder>
</form>
</body>
Raw
script.js
angular.module('formExample', ['ngMessages'])
.controller('FormController', ['$scope', function($scope) {
var vm = this;
vm.formDef = [{
type: 'textField',
label: 'First Name',
name: 'firstName',
model: vm._firstName,
minLength: 3
}, {
type: 'textField',
label: 'Last Name',
name: 'lastName',
model: vm._lastName,
minLength: 3
}, {
type: 'textField',
label: 'Username',
name: 'username',
model: vm._username,
minLength: 6,
maxLength: 12
}, {
type: 'someField',
label: 'Some Field',
name: 'someField',
model: vm._someField,
minLength: 3
}];
}])
.directive('formBuilder', function() {
return {
restrict: 'E',
scope: {
'fields': '='
},
bindToController: true,
controller: function() {
},
controllerAs: 'ctrl',
templateUrl: 'form-builder.html'
};
})
.directive('textField', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
'modelObj': '=',
'label': '@',
'fieldName': '@',
'minLength': '@',
'maxLength': '@'
},
bindToController: true,
controller: function() {
var vm = this;
},
controllerAs: 'ctrl',
templateUrl: 'customInput.html'
};
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-messages.js"></script>
Raw
style.css
.field:invalid,
.field.is-error {
border-color: inherit;
}
Raw
styles
<link href="//d2v52k3cl9vedd.cloudfront.net/basscss/7.0.0/basscss.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment