Dugun Forms is a set of AngularJS directives which replaces your inputs.
The aim is to make the forms easier and richer.
GOALS
Using bower, run:
bower install --save dugun-forms
Then include the module in your dependencies:
angular.module('myApp', ['dugun.forms']);
Now you can start using the directives!
Generic input for text.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | string or number (depends on type) | Yes | Model to store value |
| ngModelOptions | Object | No | Model options see documentation |
| ngRequired | boolean | No (default: false) | True if required, false otherwise |
| ngDisabled | boolean | No (default: false) | True if disabled, false otherwise |
| maxlength | string | No | If entered, there will be an incicator on right that shows characters left. To disable this feature, see disableLength attribute |
| disableLength | boolean | No | If true, disables left characters incicator |
| clearable | boolean | No (default: false) | If the user can clear the selection |
| type | String | No (default: 'text') | Set the type of input. see available types |
| addonRight | String | No | If exists, adds an addon to right. See example |
| dgId | string | No | Id for input element |
| dgName | string | No | Name for input element |
| mask | string | No | You can define a mask for input using ui-mask |
| numberOnly | boolean | No | If true, user can enter only number in input |
| readonly | boolean | No (default: false) | Whether this input is readonly |
| form | string | No | If entered, the input will belong to the form with given id |
There are many available attributes for input, some are not included here. You can check MDN for all. dgFormText supports most of them.
Example (Number)
Example (Text)
Textarea.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | string or number (depends on type) | Yes | Model to store value |
| ngRequired | boolean | No (default: false) | True if required, false otherwise |
| ngDisabled | boolean | No (default: false) | True if disabled, false otherwise |
| maxlength | string | No | Maximum length of text |
| dgId | string | No | Id for input element |
| dgName | string | No | Name for input element |
| placeholder | string | No | Placeholder |
| cols | string | No | Columns of textarea |
| rows | string | No | Columns of textarea |
| form | string | No | If entered, the input will belong to the form with given id. Useful when you need nested forms |
Dropdown using ui-select.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | string or number (depends on type) | Yes | Model to store value |
| options | Array | Yes | An array of objects. Each option should represent a choice. By default, you can use id for your value and name for the label. You can change these keys with idKey and valueKey |
| idKey | string | No (default: 'id') | In which property of your object your value is stored |
| valueKey | string | No (default: 'name') | In which property of your object your label is stored |
| ngRequired | boolean | No (default: false) | True if required, false otherwise |
| ngDisabled | boolean | No (default: false) | True if disabled, false otherwise |
| allowClear | boolean | No (default: false) | If you will allow the user to clear selected value, set this to true |
| placeholder | string | No | Placeholder |
| searchEnabled | boolean | No (default: true) | If you need to disable search feature, set this to false |
| form | string | No | If entered, the input will belong to the form with given id. Useful when you need nested forms |
Dropdown with multiple select using ui-select.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | string or number (depends on type) | Yes | Model to store value |
| options | Array | Yes | An array of objects. Each option should represent a choice. By default, you can use id for your value and name for the label. You can change these keys with idKey and valueKey |
| idKey | string | No (default: 'id') | In which property of your object your value is stored |
| valueKey | string | No (default: 'name') | In which property of your object your label is stored |
| ngRequired | boolean | No (default: false) | True if required, false otherwise |
| ngDisabled | boolean | No (default: false) | True if disabled, false otherwise |
| allowClear | boolean | No (default: false) | If you will allow the user to clear selected value, set this to true |
| placeholder | string | No | Placeholder |
| searchEnabled | boolean | No (default: true) | If you need to disable search feature, set this to false |
| form | string | No | If entered, the input will belong to the form with given id. Useful when you need nested forms |
Boolean input using ui-bootstrap button groups.
As this element is not a real input in the form, there is no validation for it. So use it carefully. (Example: set a default value on start, then do not allow user to clear.)
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | boolean | Yes | Model to store value |
| allowClear | boolean | No (default: false) | If true, user can erase the selected value |
| labelTrue | string | Yes | Label for "yes" |
| labelFalse | string | Yes | Label for "no" |
Boolean select using dgFormSelect2.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModel | boolean | Yes | Model to store value |
| allowClear | boolean | No (default: false) | If true, user can erase the selected value |
| labelTrue | string | Yes | Label for "yes" |
| labelFalse | string | Yes | Label for "no" |
| valueTrue | any | No (default: true) | Value for "yes" |
| ngRequired | boolean | No (default: false) | Set to true if required |
| placeholder | string | No | Placeholder |
Single checkbox.
Multiple checkboxes that stores values in an array.
Multiple radio buttons.
Datepicker using ui-bootstrap datepicker. Stores the value as string in YYYY-MM-DD format.
Daterangepicker using angular-daterangepicker project. It stores model values as string in YYYY-MM-DD format. The format is not changable at the moment.
| Attribute | Type | Required? | Description |
|---|---|---|---|
| ngModelStart | String (YYYY-MM-DD format) | Yes | Model to store start date of range |
| ngModelEnd | String (YYYY-MM-DD format) | Yes | Model to store end date of range |
| min | Date | No | Minimum date value that user can select |
| max | Date | No | Maximum date value that user can select |
| options | Object | No | An object that contains daterangepicker options See full list |
| clearable | boolean | No (default: false) | If the user can clear the selection |
| ngRequired | boolean | No (default: false) | Add required attribute to input element |
| dgId | string | No | Id for input element |
| dgName | string | No | Name for input element |
| form | string | No | Form attribute for input element |
| placeholder | string | No | Placeholder |
Example
Timepicker using angular-jquery-timepicker project. Stores the selected time in HH:MM format.
Datetime picker using dgFormDate and dgFormTime. Stores the datetime in YYYY-MM-DD HH:MM format to work well with MySQL / MariaDB.