ngx-formly-components v1.0.40
Notice:
This is still a work in progress, not to be used in production environments... yet.
Table of contents
Getting Started
Ngx-formly-components is an Angular 4+ module which contains a set of ready-to-use, easily configurable components to aid those who seek to create and mantain forms on the fly almost effortlessly. It is designed to work along with @angular/material and ng-formly, which means you'll get really cool looking JSON configurable forms.
To get started there's a couple of steps required by angular material you'll have to complete before being able to use any components properly:
1. Include a theme
Including a theme is required to apply all of the core and theme styles to your application. To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html. For more information on theming and instructions on how to create a custom theme, see the theming guide.
2. Add material icons
Include this line in your index.html if you don't plan on hosting the icons yourself:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
Otherwise you first have to download the icon font:
npm install material-design-icons --save
Once that's done downloading browse your node_modules folder and copy the iconfont folder from inside the material-design-icons folder to your project's assets folder.
Afterwards include assets/material/iconfont/material-icons.css
to your project and you're set.
Installation instructions
Install ngx-formly-components from npm
npm install ngx-formly-components@latest --save
Import FormlyComponentsModule
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormlyComponentsModule } from 'ngx-formly-components';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormlyComponentsModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Running the demo
> npm install
> ng serve
>>> Open your browser on `http://localhost:4200`
Components
Input
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
format | (e: string) => string |
source | Observable<string[]> |
keydown | (e: any)=>void |
password | boolean |
maxLength | number |
@source
: A list which enables autocomplete capabilities
Textarea
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
format | (e: string) => string |
keydown | (e: any, shift: boolean)=>void |
maxLength | number |
minRows | number |
maxRows | number |
Select
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
format | (e: string) => string |
nonull | boolean |
maxRows | number |
minRows | number |
maxLength | number |
changed | (e: any) => void |
Select-Autocomplete
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
source | Observable<{ name: string, value: string | number }[]> |
nonull | boolean |
tooltip | 'before'|'after'|'above'|'below'|'left'|'right' |
debounceTime | number |
changed | (e: any) => void |
Autocomplete
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
source | (e: string)=>Observable<{ name: string, value: string |value: 2 }])} |
tooltip | 'before'|'after'|'above'|'below'|'left'|'right' |
debounceTime | number |
changed | (e: any) => void |
Checklist
Input | Type | Example |
---|---|---|
text | string | 'I agree' |
disabled | boolean | true |
Datetime
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
format | string |
tooltip | string |
mask | (string | RegExp)[] |
Chips
Input | Type |
---|---|
placeholder | string |
disabled | boolean |
source | Observable<string[]> |
onlyAutocomplete | boolean |
maxItems | number |
changed | (e: any) => void |
Address-Picker
Not yet documented
Repeated-Section
Not yet documented
Blank
Just a blank, can be useful. Might want to check out
app.component.ts
Wrappers
- Section
- Split
- Card
Demo code
All available components are being used in the demo code, check out app.component.ts
for more detailed information on how to use each.
Issues
Feel free to submit any issues or features you want to see in the future! Happy coding!
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago