Skip to content

rainerhahnekamp/ngx-formly-helpers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

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:

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

About

A set of helper functions for ngx-formly

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published