ngx-formly-helpers
Version:
A set of helper functions for ngx-formly
96 lines (83 loc) • 2.47 kB
Markdown
# ngx-formly-helpers
ngx-formly is an Angular library. It simplifies the creation of forms by a declaring the form model in the component. It supports different theme libraries like Material, Bootstrap, etc.
ngrx-formly-helper provides opt-in functions for form fields that are used most of the time. Especially with form-centric applications, it reduces the verbosity and makes the code more readable.
A demo is available on: https://stackblitz.com/github/rainerhahnekamp/ngx-formly-helpers-example
For example following ngx-formly config:
```typescript
this.fields = [
{
key: "firstname",
type: "input",
templateOptions: { label: "Firstname" }
},
{
key: "lastname",
type: "input",
templateOptions: { label: "Firstname", required: true }
},
{
key: "birthday",
type: "datepicker",
templateOptions: { label: "Birthday" }
},
{
key: "height",
type: "input",
templateOptions: { label: "Height (inches)" }
},
{
key: "gender",
type: "radio",
templateOptions: {
label: "Gender",
options: [{ key: "m", label: "male" }, { key: "f", label: "female" }]
}
},
{
key: "continent",
type: "select",
templateOptions: {
label: "Continent",
options: continents
}
}
];
```
Can be reduced with ngx-formly-helpers to:
```typescript
this.fields = [
formly.text("firstname", "Firstname"),
formly.requiredText("lastname", "Lastname"),
formly.date("birthday", "Birthday"),
formly.number("height", "Height (inches)"),
formly.radio("gender", "Gender", [
{ key: "m", label: "male" },
{ key: "f", label: "female" }
]),
formly.select("continent", "Continent", continents)
];
```
Make sure that ngx-formly is installed and is working. Then simply add ngx-formly-helpers by
`npm install ngx-formly-helper -D`
You can then replace your form field configuration by using the functions provided by the `formly` object.
Helper methods exist for the common input elements in both required and non-required flavour:
* text
* requiredText
* number
* requiredNumber
* hidden
* checkbox
* requiredCheckbox
* select
* requiredSelect
* multiSelect
* requiredMultiSelect
* radio
* requiredRadio
* date
* requiredDate
* textArea
* requiredTextArea
You also have can use the two factory methods to create your own helper functions:
* field
* requiredField