https://github.com/johannesjo/angular-auto-forms
Auto form markup helper
https://github.com/johannesjo/angular-auto-forms
Last synced: 30 days ago
JSON representation
Auto form markup helper
- Host: GitHub
- URL: https://github.com/johannesjo/angular-auto-forms
- Owner: johannesjo
- License: lgpl-2.1
- Created: 2014-12-06T20:12:21.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-12-07T04:14:03.000Z (almost 11 years ago)
- Last Synced: 2025-08-11T12:59:35.010Z (2 months ago)
- Language: JavaScript
- Homepage: http://johannesjo.github.io/angular-auto-forms/
- Size: 969 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-auto-forms
==================
*[ng-fab-form](https://github.com/johannesjo/ng-fab-form)'s little companion for auto-markup*
Simple helper + extendable api. Get from a couple of form elements to fully standard bootstrap-markup in a breeze. Take the same form, change an attribute and get anther form layout. Allows you to declare your own rules and should be easily extended for other css-frameworks, even your very own. [Try it yourself!](http://plnkr.co/edit/id1Oh4?p=preview)
## Install
```
bower install angular-auto-forms --save-dev
```
or install its companion [ng-fab-form](https://github.com/johannesjo/ng-fab-form) together with it:
```
bower install angular-auto-forms ng-fab-form --save-dev
```
## Example
Load the module:
```javascript
angular.module('exampleApp', [
'angularAutoForms'
]);
```
Set the `aaf-form-handler` to `autoFormBootstrap.basic` on your form:
```html
Test-Option
Submit Form
```
And enjoy!
## Directives
#### aaf-ignore
If applied to a form, the form ignores the default form-handler if one is set.
If applied to a form-element, it leaves it untouched.
#### aaf-label
The label-text. Applieable to every form element. You can pass scope-variables to it, too!
```
```
#### aaf-form-handler
Sets the form markup-helper function. The default bootstrap helper ships with three: `inline`, `basic` and `horizontal`.
```html
...
...
...
```
## Set a default Handler
```
angular.module('exampleApp', [
'angularAutoForms'
])
.run(function (AngularAutoForms, autoFormBootstrap)
{
AngularAutoForms.defaultHandler = autoFormBootstrap.inline;
});
```
## Create your own helper
Although not required for the standard form, it is highly recommended to install jQuery, when creating your own handlers as things are little complicated with jQuery-lite sometimes.
With jQuey it should be super easy to create your own helpers. An example:
```
angular.module('angularAutoForms')
.factory('autoFormMyForm', function (AngularAutoForms)
{
'use strict';
var labelName = AngularAutoForms.config.label,
ignoreName = AngularAutoForms.config.ignore;
return {
simple:function(formEl){
formEl.addClass('my-simple-form');
var inputs = formEl.find('input');
inputs.each(function(){
var el = $(this);
el.wrap('
')
.parent().prepend('' + el.attr(labelName) + '');
});
var checkboxes = formEl.find('input[type="checkbox"');
checkboxes.wrap('');
}
};
});
```
```html
...
...
...
```
Created something useful? Share it!
`angular-auto-forms` is published under the [The GNU Lesser General Public License V2.1](https://github.com/johannesjo/angular-auto-forms4/blob/master/LICENSE).