ngx-formly / ngx-formly Goto Github PK
View Code? Open in Web Editor NEW๐ JSON powered / Dynamic forms for Angular
Home Page: https://formly.dev
License: MIT License
๐ JSON powered / Dynamic forms for Angular
Home Page: https://formly.dev
License: MIT License
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.
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
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'
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'.
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
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.
I've been thinking what's the differentiator of using this lib instead of Ng2 Form components & Form Builder:
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
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
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:
FormlyFieldGroup
in a div and allow to set it's class.FormlyFieldGroup
(just as in FormlyForm
)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).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.
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,
The ng2 version needs to support templateManipulators.
i wonder how to merge angular formly with this
https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
[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'.
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"
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 ?
In the current demo the expressionProperties don't work.
Also expressionProperties should work with both expressions (strings) and (functions) same as the original 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.
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.
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
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
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
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.
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.
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??
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
Saw readme file.let that you are looking for help. Let me know how I can help.
@kentcdodds please add @divyakumarjain to the angular 2 formly core team.
Thanks
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.
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
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.
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
@divyakumarjain Can we look into this, I think this got broke after the control group logic was removed or something.
The ng2 version needs to support wrappers.
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.
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!
The ng2 version should support the ngModelAttrs feature.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.