Formly for Angular is an AngularJS module which has directives to help customize and render JSON based forms. The directive originated from a need to allow our users to create surveys and distribute them easily. Currently we've can render the form data from JSON and assign a model to form so we can receive the submitted data.
-
Required to use Formly:
-
Angular
-
Twitter Bootstrap (CSS Only)
-
Dev dependencies to build Formly
-
npm
See bower.json
and index.html
in the master
branch for a full list / more details
-
Install with Bower
$ bower install angular-formly
-
Include the files in your index.html
<script src="bower_components/angular-formly/dist/formly.min.js"></script>
-
Add 'formly' as a required module to your angular app, usually in
app.js
:
var app = angular.module('app', ['ng', 'ui.router', 'formly']);
<formly-form result="formData" fields="formFields" options="formOptions" ng-submit="onSubmit()">
</formly-form>
For options specific to input types see their directive html in src/directives
var formFields = [
{
//the key to be used in the result values {... "username": "johndoe" ... }
key: 'username',
//default value
default: 'uberuser'
type: 'text',
label: 'Username',
placeholder: 'johndoe',
required: true,
disabled: false, //default: false
},
{
key: 'password'
type: 'password',
label: 'Password',
required: true,
disabled: false, //default: false
}
];
var formOptions = {
//Set the id of the form
uniqueFormId: 'myFormId',
//Hide the submit button that is added automaticaly
//default: false
hideSubmit: false,
//Set the text on the default submit button
//default: Submit
submitCopy: 'Login'
};
git checkout master
- run
npm install && bower install
- test your code using
grunt dev
which hosts the app athttp://localhost:4000
- commit your changes
- update README, CHANGELOG, bower.json, and do any other final polishing to prepare for publishing
- git commit changes
grunt dev
: Creates a server for testing athttp://0.0.0.0:4000
grunt publish
: Copies the src folder and bower_components to gh-pages