Angular AutoFields
Avoid bloating your templates with repetitive form html.
Instead, just specify a schema for the form and the model you want to bind it to and you're done!
Avoid bloating your templates with repetitive form html.
Instead, just specify a schema for the form and the model you want to bind it to and you're done!
bower install angular-autoFields-bootstrap
install-package AngularJs.AutoFields.Bootstrap
<script type="text/javascript" src="js/autofields.js"></script> <!-- With Bootstrap --> <script type="text/javascript" src="js/autofields-bootstrap.js"></script>
autofields.js and autofields-bootstrap.js scripts provided by this component into your appautofields as a module dependency to your app
property the data property to bind totype the type of field. Options include: checkbox, date, select, textarea, any text variation (ie. password, text, email, number)label the label for the field. If no label is provided it will convert the property name to title case. If you don't want a label, set it's value to ''placeholder the placeholder for the field. If no placeholder is provided it will use the label. If you don't want a placeholder, set it's value to ''help a block of help or description text to be displayed beneath the fieldattr any additional attributes you would like to have on the object. Camelcase is converted to dash notation. Validation properties can go here.list the string that goes into ng-options for select fieldsrows number of textarea rows (default: 3)columns number of sm columns a field should span if the type is multiple. If this is applied at the same level as the multiple type, it will apply it to all of it's fields.msgs validation messages for corresponding validation properties on the fieldvalidate enable/disable validation for the field (default: true)addons array of addon objects to be included with the input
button is a button (default: false)icon class string for an icon to include, empty or null implies no iconcontent string to be placed in the addonbefore prepend the addon (default: false)classes object with an array of classes for each element of a field group: container, input, labelattributes object with default attribute-value pairs for each element of a field group: container, input, labeldisplayAttributes array of attributes that affect field display. ng-if, ng-show, ng-hidecontainer the html for the div that will hold the fieldstextareaRows the default amount of rows for a textarea (3)fixUrl whether or not url type fields should have http:// auto added (true)validation settings for validation
enabled enabled/disable validation (enabled by default)showMessages enabled/disable validation messages (enabled by default)defaultMsgs default validation messages when none is specified in the field schemaclasses adds 4 new element class arrays: row, col, colOffset, helpBlocklayout layout options for the fields
type form type: basic | horizontallabelSize how many columns a label should spaninputSize how many columns an input should spandefaultOption the text for the default select option (Select One)dateSettings settings for the date fields (see angular-ui-bootstrap's date picker)AutoFields is now highly extensible allowing developer to easily add new field types and field properties.
$autofieldsProvider.registerHandler(types, handler)types a string or array of strings with field types that will be used to map to the handlerhandler a function that will be called by AutoFields to create the fields html. AutoFields will pass directive, field, and field index
directive directive properties, options, and elements:
container the autofields container elementoptions the options for the directivefield the field schema currently being processedindex the index of the field in the field schema array
angular.module('autofields.checkbox', ['autofields.core'])
.config(['$autofieldsProvider', function($autofieldsProvider){
// Checkbox Field Handler
$autofieldsProvider.registerHandler('checkbox', function(directive, field, index){
var fieldElements = $autofieldsProvider.field(directive, field, '<input/>');
if(fieldElements.label) fieldElements.label.prepend(fieldElements.input);
return fieldElements.fieldContainer;
});
}]);
$autofieldsProvider.registerMutator(key, mutator, options)key something the mutator can be referenced by in require & override requestsmutator called by autofields after the creation of a field element
directive directive properties, options, and elements:
container the autofields container elementoptions the options for the directivefield the field schema currently being processedfieldElements an object containing:
fieldContainer the container element for the field's label and inputlabel the label elementinput the input elementvalidation whether or not to include validation requires validationmsgs an array of possible error messages requires validationvalidMsg a field's valid message requires validation
angular.module('autofields.helpblock', ['autofields.core'])
.config(['$autofieldsProvider', function($autofieldsProvider){
// Help Block Propert Support
$autofieldsProvider.registerMutator('helpBlock', function(directive, field, fieldElements){
if(!field.help) return fieldElements;
fieldElements.helpBlock = angular.element('<p/>');
fieldElements.helpBlock.addClass(directive.options.classes.helpBlock.join(' '))
fieldElements.helpBlock.html(field.help);
fieldElements.fieldContainer.append(fieldElements.helpBlock);
return fieldElements;
});
}]);