ckniffen / ng2-formly

JavaScript powered FORMS for ANGULAR 2

ng2-formly

Status:

Links:

angular2-formly is an Angular 2 module which has a Components to help customize and render JavaScript/JSON configured forms. The formly-form Component and the FormlyConfig service are very powerful and bring unmatched maintainability to your application's forms.

This is still a serious WIP.

Include the FormlyForm component import in the directives attribute of your Component and put this in your template

<formly-form [model]="user" [fields]="userFields">
    <button type="submit" class="btn btn-default" (click)="submit(user)">Button</button>
</formly-form>

and in your TypeScript file define the the model and fields attrnbutes

this.userFields = [{
  className: 'row',
  fieldGroup: [{
      className: 'col-xs-6',
      key: 'email',
      type: 'input',
      templateOptions: {
          type: 'email',
          label: 'Email address',
          placeholder: 'Enter email'
      },
      validation: Validators.compose([Validators.required, ValidationService.emailValidator])
  }, {
      className: 'col-xs-6',
      key: 'password',
      type: 'input',
      templateOptions: {
          type: 'password',
          label: 'Password',
          placeholder: 'Password',
          pattern: ''
      },
      validation: Validators.compose([Validators.required, Validators.maxLength(10), Validators.minLength(2)])
  }]
}];

this.user = {
  email: '[e-mail]',
  checked: false
};
            

Quick Start

• install ng2-formly

  npm install ng2-formly --save

• add the script to the HTML file

<!-- index.html -->
<script src="node_modules/ng2-formly/bundles/ng2-formly.min.js"></script>

• and to your component add

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FormlyForm, FormlyConfig, FormlyMessages, TemplateDirectives, FormlyProviders} from 'ng2-formly/ng2-formly'

@Component({
    selector: 'hello-app',
    template: `
        <h1>Hello, {{name}}!</h1>
        Say hello to: <input [value]="name" (input)="name = $event.target.value">
        <formly-form [model]="user" [fields]="userFields"></formly-form>
    `,
    directives: [FormlyForm],
    providers: [FormlyConfig, FormlyMessages]
})
export class HelloApp {
    name: string = 'World';
    user = {};
    userFields;
    constructor(fc: FormlyConfig) {
        ['input', 'checkbox'].forEach((field) => {
            fc.setType({
                name: field,
                component: TemplateDirectives[field]
            })
        });
        
        this.userFields = [{
            key: 'nameOfPerson',
            type: 'input',
            templateOptions: {}
        }]
    }
}

bootstrap(HelloApp, [FormlyProviders]);

From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.

Roadmap

See the issues labeled enhancement

Financial Support

Some have expressed a desire to contribute financially as a way of expressing gratitude. I appreciate anything you (or your company) would be willing to contribute :-) You can support me here. Thanks!

Thanks

A special thanks to Kent C. Dodds for giving me opportunity to work on this. This library is maintained (with love) by me, Mohammed Zama Khan. Thanks to all contributors! If you're trying to find angular-formly, go here