ngx-formly / ngx-formly

📝 JSON powered / Dynamic forms for Angular

JSON powered / Dynamic forms in Angular

---

Formly is a dynamic (JSON powered) form library for Angular that brings unmatched maintainability to your application's forms.

Features

• 🔥 Automatic forms generation
• 📝 Easy to extend with custom field types, validation, wrappers and extensions.
• ⚡️ Supports multiple schemas:
  • Formly Schema (core)
  • JSON Schema
• 😍 A bunch of themes, out of the box!
• 💪 Built on top of Angular Reactive Forms
• 📹 @eggheadio course - 20 lessons & 78 minutes

Docs

• Get Started
• Themes
• Examples

Resources

• How to auto-generate advanced forms using Formly
• Build Fast, JSON-Powered Forms on Angular With Ngx Formly
• How to Build Fast, Advanced JSON-Powered Forms on Angular With ngx-formly

Supported UI libs

UI
Bootstrap	Demo	StackBlitz
Material2	Demo	StackBlitz
Ionic	Demo	StackBlitz
PrimeNG	Demo	StackBlitz
Kendo	Demo	StackBlitz
NG-ZORRO		StackBlitz
NativeScript

Which Version to use?

Angular version	Formly version
Angular >= 13	@ngx-formly/[email protected]
Angular >= 7	@ngx-formly/[email protected]
Angular >= 6	@ngx-formly/[email protected]
Angular >= 5	@ngx-formly/[email protected]
Angular >= 4	@ngx-formly/[email protected]
Angular >= 2	[email protected]

Core Team

Abdellatif Ait boudad

Juri Strumpflohner

Mohammed Zama Khan

Bram Borggreve

Keni Steward

Max Kless

Contributors

Thanks goes to these wonderful people:

ngx-formly's Issues

Differentiator with Ng2 Forms

I've been thinking what's the differentiator of using this lib instead of Ng2 Form components & Form Builder:

• https://angular.io/docs/ts/latest/guide/forms.html
• http://learnangular2.com/forms/#formbuilder

I put the issue on the table to see if some synergy can be done, maybe this can be re-used in some way, trying not to re-invent the wheel.

This might be related to: #21

Several templates not checking for disabled attribute

In comparison to input, checkbox and textarea, the templates for select, multicheckbox and radio are not evaluating the disabled attribute of templateOptions and therefore can't be disabled.

Efforts towards a web components/vanilla js formly core library

Do you think a core lib can done using either WebComponents or Vanilla JS?

Considering other frameworks would benefit from it: benoror/ember-formly#1

Fyi, there was some kind of initiative some time ago: https://github.com/forms-js

Uncaught ReferenceError: System is not defined

I got following error when trying to use ng2-formly.

ng2-formly.js:1Uncaught ReferenceError: System is not defined

I'm using angular rc1 with webpack.
from this seed project https://github.com/AngularClass/angular2-webpack-starter

Update to RC3 - dynamic form

i wonder how to merge angular formly with this
https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

select options not showing

Hello,
I have this piece of code along with other inputs and checkboxes, but I do not know why select does not show the options within my array.

`{
className: "col-xs-8",
key: "dropdown",
type: "select",
templateOptions: {
options: [
{
"name" : "Option-A",
"value": "OptionA",

                           }
                ]
            }
        }

`
If I set another set of name/value I can see my dropdown having two empty options, but no text.

Can anyone please tell me what Im doing wrong?

thanks a lot

npm script flow.compile:system not working on windows

npm run flow.compil.system on windows causes following issue

> [email protected] flow.compile:system C:\Users\divyjain\Documents\GitHub\ng2-formly
> ./.config/bundle-system.js

'.' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "flow.compile:system"
npm ERR! node v5.7.0
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] flow.compile:system: `./.config/bundle-system.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] flow.compile:system script './.config/bundle-system.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng2-formly package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ./.config/bundle-system.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng2-formly
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng2-formly
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\divyjain\Documents\GitHub\ng2-formly\npm-debug.log

To fix this problem created bundle-system and bundle-system.cmd in .config folder and update npm script location but it failed with similar error. But surprisingly it works when i move bundle-system.cmd to node_module/.bin

support for typeahead

Please take a look at this ng2 module for bootstrap 3/4. It has typeahead component you might be able to use.

http://valor-software.com/ng2-bootstrap/

This would be very helpful!

Thanks!

'focus' can only be true for one field

Support for Validation to be An Array of strings

Demo throws error on Chrome (only on MAC) a

This error is being thrown on Chrome on Mac, but runs fine on all Chrome on Windows

ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'title'
browser_adapter.ts:78 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:78
browser_adapter.ts:78 Error: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'title'

FormlyForm directive is error.

I use 'npm install ng2-formly --save' to add it in my project.
Then do this:

import {Component} from '@angular/core';
import {FormlyForm, FormlyConfig, FormlyMessages, TemplateDirectives, FormlyProviders,FormlyPubSub,Field,FormlyBootstrap} from 'ng2-formly';

@Component({
    selector: 'appform-app',
    template: `
        <h1>Formly</h1>
    `,
    directives: [FormlyForm],
    providers: [FormlyConfig, FormlyMessages]
})
export class ApplicationForm{
    constructor() {}
}

But the program is not run .
The Error is : Unexpected directive value 'undefined' on the View of component 'ApplicationForm'.

Then I start create a "empty project", do it again. It's not run.
The Error is : Uncaught (in promise): No Directive annotation found on FormlyForm.

This is my part of package.json:
```
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6",
"breeze-bridge-angular2": "^0.1.0",
"breeze-client": "^1.5.8",
"core-js": "^2.4.0",
"ng2-formly": "^2.0.0-beta.5",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"webpack": "^1.13.2",
"zone.js": "^0.6.12"

Support Angular Universal

https://github.com/angular/universal

I am dont think Support for Angular Universal is a priority. But I was playing formly with Universal and debugging the issues.

Seems like there are few do's and don't

1. Should not use this.elem.nativeElement

Will document those do's and don'ts for now. So that later support for angular universal would be easy.

Let me know what everybody thinks. We can start maintaining markup file for this.

Bundle into one JS file for npm installs

not bundle with webpack (lost control.service.d.ts)

[default] /Users/roma/git/sos_manager_front/node_modules/ng2-formly/src/components/formly.form.d.ts (3,32):
Cannot find module './../services/control.service'.
[default] /Users/roma/git/sos_manager_front/node_modules/ng2-formly/src/main.d.ts (4,32):
Cannot find module './services/control.service'.
[default] /Users/roma/git/sos_manager_front/node_modules/ng2-formly/src/services/formly.providers.d.ts (1,32):
Cannot find module './control.service'.

would like to help in angular2 migration

Saw readme file.let that you are looking for help. Let me know how I can help.

extend and multiple inheritance

I'm not sure what the appetite for major refactoring is on this rewrite, but one thing that was a little non-optimal in the original formly was the single-inheritance model used in the "extend" functionality. Is there any interest in supporting more of a mixin-style to extending functionality of types, wrappers, manipulators, etc?

For example, in my ng1-formly project, I have a base type that contains functionality that I'd like to include in most (but not all) of my types. I'd really love to have multiple different base types that include different things and then use some or all of them on each "downstream" type.

That said, I know multiple inheritance is a lot more complex than single inheritance. And like I said, I'm not sure if you guys are trying to optimize things while rewriting or just doing a straight one-for-one rewrite.

Update ng2-formly to use @angular/formly instead of deprecated forms api

templateOptions should be defined

Upgrade to RC2

At some point we'll need to upgrade this to RC2

I was going to see if I could tackle this issue to help but I don't see anything about contributing in the markdown and I don't see any unit tests to validate that the upgrade would work. There aren't a lot of breaking changes but there are some.

Thoughts?

Edit: I should add that I'm trying to get involved and help with this project as I use angular-formly in production a lot. It's quite possible that I'm missing the best way to contribute due to my inexperience.

More Repo to separate Core with Templates

Hi @kentcdodds,

We wanted more repositories on Angular 2 version of Formly, like how we have for Angular 1. Want to separate out Templates with Formly. We currently have templates of bootstrap in this repo, so we need a repo for bootstrap now, and then later on we might look for contributions for Ionic 2 etc.

Thanks

Update to Angular 2.RC1

Support templateManipulators

The ng2 version needs to support templateManipulators.

Add ng2Module support

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

having multiple button in the form

I know that in formly-forms for angular1 there is a
type: 'button'
which will create a button and bind a callback(function) to it.

Is there something similar in ng2-formly? I would like to add multiple buttons with different functionality in a form.

Please advise,

Use @angular/formly instead of deprecated forms api breaks radio button

ng2-formly.min.js:1 Uncaught ReferenceError: System is not defined

Importing ng2-formly.min.js from CDN
https://cdnjs.cloudflare.com/ajax/libs/ng2-formly/2.0.0-beta.5/ng2-formly.min.js

loading the file in the Ionic2 index.html results in the console error mentioned in title

ng2-formly.min.js:1 Uncaught ReferenceError: System is not defined

Any idea ?
Thanks

Separate Formly and Templates

Can we add divyakumarjain to angular2 formly core team member?

@kentcdodds please add @divyakumarjain to the angular 2 formly core team.

Thanks

Supporting Multi Checkbox

Support wrappers

The ng2 version needs to support wrappers.

Group Validation

Two way Data Binding

@divyakumarjain Can we look into this, I think this got broke after the control group logic was removed or something.

09f9778#diff-69a89068190b42d36203ed92bed384f7L41

Version 2.0.0-beta.3 typings error at installation

Here are the error messages :

$ npm install ng2-formly

> [email protected] postinstall /***/node_modules/ng2-formly
> typings install


sh: 1: typings: not found
npm ERR! Linux 3.19.0-25-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/local/bin/npm" "install" "ng2-formly"
npm ERR! node v4.4.2
npm ERR! npm  v2.14.7
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] postinstall: `typings install`
npm ERR! spawn ENOENT
npm ERR! 
**npm ERR! Failed at the [email protected] postinstall script 'typings install'.**
npm ERR! This is most likely a problem with the ng2-formly package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get their info via:
npm ERR!     npm owner ls ng2-formly
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /***/npm-debug.log

There is a possibility to install typings globaly (is it a workaround or a new step in ng2-formly installation?):

$ npm install
npm WARN package.json ***@1.0.0 No license field.
/
> [email protected] postinstall /***/node_modules/ng2-formly
> typings install

**typings WARN enoent Path "/***/node_modules/ng2-formly/typings.json" is missing**

└── (No dependencies)

[email protected] node_modules/ng2-formly
└── [email protected]_


_$ ls -l node_modules/ng2-formly/
total 40
drwxrwxr-x 4096 mai   26 09:45 bundles
-rw-rw-r-- 1096 mai   11 23:21 LICENSE
-rw-rw-r-- 1 623 mai   20 19:10 ng2-formly.js
drwxrwxr-x 3 4096 mai   26 09:45 node_modules
-rw-rw-r-- 1 4530 mai   26 09:45 package.json
-rw-rw-r-- 1 4521 mai   11 23:21 README.md
drwxrwxr-x 5 4096 mai   26 09:45 src
-rw-rw-r-- 1 330 mai   26 05:39 tsconfig.build.json

But the ng2-formly.d.ts file is still missing and the project using ng2-formly is not compiling.

error TS2307: Cannot find module './control.service'.

Just installed with npm and added to my project. Got following errors when start my app.

BTW, I am using webpack not systemjs

ERROR in C:\Users\fdu\Documents\Training\sing\angular2-seed\node_modules\ng2-formly\src\services\formly.providers.d.ts
(1,32): error TS2307: Cannot find module './control.service'.

ERROR in C:\Users\fdu\Documents\Training\sing\angular2-seed\node_modules\ng2-formly\src\components\formly.form.d.ts
(3,32): error TS2307: Cannot find module './../services/control.service'.

ERROR in C:\Users\fdu\Documents\Training\sing\angular2-seed\node_modules\ng2-formly\src\main.d.ts
(4,32): error TS2307: Cannot find module './services/control.service'.

Angular is Beta, so Formly development makes sense now

I would love to see formly development to start as we have angular2 in beta, lets start this work, I would love to contribute to the project

Aurelia-formly

I've been an Angular 1.x developer for several years now. One of the things which makes it such a strong platform are a number of great libraries. Of these, I would put angular-formly in the top 3, right alongside ui-router and angular-bootstrap. However, we now live in a richer ecosystem with more frameworks to choose from than ever.

After having spent time using both angular 2 and Aurelia, I personally find the latter to be superior in almost every way. However, angular formly is uniquely powerful and elegantly solves a plethora of problems.

Given this I plan to create an analogous library for Aurelia using this project as a starting point. Before doing so, I wanted to get feedback from the maintainers of this repository as well as the Aurelia community.

My intent is not to start a framework war or fragment this fantastic community, but simply to bring the power of the formerly model to another framework.
I would very much appreciate thoughts on this.

Typescript not compiling since 2.0.0-beta.1

The ng2-formly.d.ts file is missing in npm lasts packages (2.0.0-beta.1 and 2.0.0-beta.2). So the typescript code is not compiling.

2.0.0-alpha.5:
$ ls -l node_modules/ng2-formly/
total 44
4096 mai 18 18:19 bundles
990 avril 1 06:08 gulpfile.js
1096 avril 6 19:28 LICENSE
63 avril 13 20:43 ng2-formly.d.ts
623 avril 13 20:43 ng2-formly.js
4096 mai 18 18:19 node_modules
3109 mai 18 18:19 package.json
3151 avril 12 17:17 README.md
4096 mai 18 18:19 src
330 avril 13 20:41 tsconfig.json
275 avril 13 20:15 typings.json

2.0.0-beta.2:
$ ls -l node_modules/ng2-formly/
total 48
4096 mai 18 17:36 bundles
1672 mai 18 15:22 gulpfile.js
1096 mai 11 23:21 LICENSE
623 mai 18 15:30 ng2-formly.js
4096 mai 18 17:36 node_modules
3784 mai 18 17:36 package.json
4521 mai 11 23:21 README.md
4096 mai 18 17:36 src
5 07 mai 18 15:22 tsconfig.json
1378 mai 11 23:21 tslint.json
275 mai 11 23:21 typings.json

Is this an issue or a new step is needed in ng2-formly installation ?

Pipes in expressionProperties ?

It seems that pipes are not supported in expressionProperties.

HTML:

{{"Hello" | uppercase}}
      <formly-form [model]="user" [fields]="userFields" [form]="form">
        <div class="login-screen-button-container">
          <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="false">{{"LOGIN_SUBMIT" | translate}}</button>
        </div>
      </formly-form>

JS:

this.userFields = [
      {
        // the key to be used in the model values
        // so this will be bound to user.username
        key: 'username',
        type: 'input-inline',
        templateOptions: {
          label: this._translateService.instant('LOGIN_LOGIN'),
          placeholder: this._translateService.instant('LOGIN_LOGIN_PLACEHOLDER'),
          focus: true
        },
        expressionProperties: {
          'templateOptions.label': 'TODO',
          'templateOptions.placeholder': '"Hello" | uppercase'
        },
        validation: Validators.compose([Validators.required, Validators.minLength(1)])
      },
      {
        key: 'password',
        type: 'input-inline',
        templateOptions: {
          type: 'password',
          label: this._translateService.instant('LOGIN_PASSWORD'),
          placeholder: this._translateService.instant('LOGIN_PASSWORD_PLACEHOLDER')
        },
        expressionProperties: {
          'templateOptions.label': 'TODO',
          'templateOptions.placeholder': 'TODO',
         'templateOptions.disabled': '!model.username'
        },
        validation: Validators.compose([Validators.required, Validators.minLength(1)])
      }
    ];

The "Hello" string is well uppercased in HTML but the placeholder raise an error in console:

ng2-formly.js:26 ReferenceError: uppercase is not defined
    at FormlyField.eval (eval at evalExpression (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:23:113), <anonymous>:3:18)
    at ModuleRecord.evalExpression (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:23:116)
    at FormlyFieldExpressionDelegate.checkExpressionChange (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:97:75)
    at FormlyField.FormlyCommon.ngDoCheck (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:273:45)
    at DebugAppView._View_FormlyForm2.detectChangesInternal (FormlyForm.template.js:313:47)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:200:14)
    at DebugAppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:289:44)
    at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:215:37)
    at DebugAppView._View_FormlyForm1.detectChangesInternal (FormlyForm.template.js:199:8)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:200:14)

The exception appeared when I tried to use "translate" pipe from ng2-translate but there is the same behavior from "uppercase" pipe from angular2.

OPINION

I think we should rename our publishing to npm like how angular team did it.

Instead of importing like

import {} from "ng2-formly/ng2-formly"; 

or 

import{} from "ng2-formly/core"

to

import {} from "@formly/core"; 

or 

import{} from "@formly/templates"

Any other opinions/comments/suggestions

@divyakumarjain @micouz @TheMcMurder @mathijshoogland

EXCEPTION: No Directive annotation found on FormlyForm

Hi there,

Just setup ng2-formly with IonicV2 like this:

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {FormlyForm, FormlyConfig, FormlyMessages, TemplateDirectives, FormlyProviders} from 'ng2-formly';
import {HTTP_PROVIDERS} from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  directives: [FormlyForm],
  providers: [FormlyConfig, FormlyMessages],
})
export class MyApp {

  private rootPage:any;

  constructor(private platform:Platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp, [HTTP_PROVIDERS, FormlyProviders])

But it raises an error when launching in web browser with serve -c

ionic $ 0     913800   group    EXCEPTION: No Directive annotation found on FormlyForm
1     913801   error    EXCEPTION: No Directive annotation found on FormlyForm
2     913802   groupEnd 
3     913808   group    EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on FormlyForm
4     913808   error    EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on FormlyForm
5     913809   error    STACKTRACE:
6     913810   error    Error: Uncaught (in promise): No Directive annotation found on FormlyForm
    at resolvePromise (http://localhost:8100/build/js/zone.js:538:32)
    at http://localhost:8100/build/js/zone.js:574:18
    at ZoneDelegate.invokeTask (http://localhost:8100/build/js/zone.js:356:38)
    at Object.onInvokeTask (http://localhost:8100/build/js/app.bundle.js:35330:41)
    at ZoneDelegate.invokeTask (http://localhost:8100/build/js/zone.js:355:43)
    at Zone.runTask (http://localhost:8100/build/js/zone.js:256:48)
    at drainMicroTaskQueue (http://localhost:8100/build/js/zone.js:474:36)
7     913811   groupEnd 
8     913813   error    Unhandled Promise rejection:, No Directive annotation found on FormlyForm, ; Zone:, angular, ; Task:, Promise.then, ; Value:, [object Object]
9     913814   error    Unhandled Promise rejection:, No Directive annotation found on FormlyForm, ; Zone:, <root>, ; Task:, Promise.then, ; Value:, [object Object]

Any idea ?
Thank you very much

Support ngModelAttrs.

The ng2 version should support the ngModelAttrs feature.

css class form-control missing in most templates

input and textearea templates both have the css class form-control included. All others don't. This causes styling to be non-uniform between different fields.

Add Unit tests

Feature requests: add styling support for field-groups and make fields optional

The demo is a great example on how to use the bootstrap row and col-** classes to create a proper form. However, bootstrap allows to nest rows but that behavior can't get replicated by formly.

Requirements to get it to work:

1. Encapsulate FormlyFieldGroup in a div and allow to set it's class.
2. Allow to set the class in the for-loop of FormlyFieldGroup (just as in FormlyForm)
3. Make the FormlyField in FormlyFieldGroup optional so that just nesting them multiple times without adding fields is possible (again, just as in FormlyForm, but instead of allowing just one, the field should be optional).
4. I assume I forgot something, so feel free to add whatever else is required.

This allows to create layouts such as this one. My particular use case is a picture spanning multiple rows (with a new formly field that supports pictures) in the form.

Hide expression should be able to receive Expressions

Not working expressionProperties

In the current demo the expressionProperties don't work.

Also expressionProperties should work with both expressions (strings) and (functions) same as the original formly.

Stream of Changes

With ng2 ControlGroup you can subscribe to the list of changes in the form.

This can be interesting if you need to do something when the form changes.

How can we do this with ng2-formly??

Two Way binding for Radio button does not work

Two binding issue discussed in #45 was fix for most of the component except for radio button.

When [(ngModel)] is added to the Radio button then the RadioButtonValueAccessor throws an error that _state object is undefined when radio button is switched. This seem like a bug in Angular. We will create a small plunk sample and share it on Angular github and stackoverflow.

SingleFocusDispatcher not exported via index.ts

SingleFocusDispatcher is required when creating your own formly templates, but it is not exported in index.ts and therefore has to be manually imported with the full path.

Considering FormlyMessage I assume the export belongs in core.ts.