UNPKG

ngx-formly-helpers

Version:
96 lines (83 loc) 2.47 kB
# 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