@meanie/angular-form-controls

A set of form control components for Angular 1 (select box, check boxes, radio buttons)

Installation

You can install this package using yarn or npm:

#yarn
yarn add @meanie/angular-form-controls

#npm
npm install @meanie/angular-form-controls --save

Include the script node_modules/@meanie/angular-form-controls/release/angular-form-controls.js in your build process, or add it via a <script> tag to your index.html:

<script src="node_modules/@meanie/angular-form-controls/release/angular-form-controls.js"></script>

Add FormControls.Component as a dependency for your app.

Styling

These form controls don’t come with styling included, so you will have to supply your own styling. An example is included in the source code.

Usage

The form controls which take an array as options, support both simple options and complex (object) options. The examples below use the following option arrays:

//Simple options, an array with string or numeric values
let simple = ['Option 1', 'Option 2', 'Option 3'];

//Complex options, an array with objects
let complex = [
  {
    id: 1,
    name: 'Option 1'
  },
  {
    id: 2,
    name: 'Option 2'
  },
  {
    id: 3,
    name: 'Option 3'
  }
];

Radio buttons

Simple options, tracked by option value (e.g. Option 1, Option 2, ...):

<radio-buttons
  options="simple"
  ng-model="model"
  on-change="updateModel(value)"
></radio-buttons>

Simple options, tracked by index of option in array (e.g. 0, 1, ...):

<radio-buttons
  options="simple"
  ng-model="model"
  track-by="$index"
  on-change="updateModel(value)"
></radio-buttons>

Simple options, disabled:

<radio-buttons
  options="simple"
  ng-model="model"
  ng-disabled="true"
  on-change="updateModel(value)"
></radio-buttons>

Simple options, required:

<radio-buttons
  name="fieldName"
  options="simple"
  ng-model="model"
  ng-required="true"
  on-change="updateModel(value)"
></radio-buttons>

Complex options, tracked by index of option in array (e.g. 0, 1, ...):

<radio-buttons
  options="complex"
  ng-model="model"
  track-by="$index"
  label-by="name"
  on-change="updateModel(value)"
></radio-buttons>

Complex options, tracked by ID property value (e.g. 1, 2, ...):

<radio-buttons
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  on-change="updateModel(value)"
></radio-buttons>

Complex options, tracked by ID property value, but returned as object:

<radio-buttons
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  as-object="true"
  on-change="updateModel(value)"
></radio-buttons>

Complex options, tracked by ID property value, nullable with specified null value and label:

<radio-buttons
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  is-nullable="true"
  null-label="'None'"
  null-value="0"
  on-change="updateModel(value)"
></radio-buttons>

Select box

Simple options, tracked by option value (e.g. Option 1, Option 2, ...):

<select-box
  options="simple"
  ng-model="model"
  on-change="updateModel(value)"
></select-box>

Simple options, tracked by index of option in array (e.g. 0, 1, ...):

<select-box
  options="simple"
  ng-model="model"
  track-by="$index"
  on-change="updateModel(value)"
></select-box>

Simple options, disabled:

<select-box
  options="simple"
  ng-model="model"
  ng-disabled="true"
  on-change="updateModel(value)"
></select-box>

Simple options, required:

<select-box
  name="fieldName"
  options="simple"
  ng-model="model"
  ng-required="true"
  on-change="updateModel(value)"
></select-box>

Complex options, tracked by index of option in array (e.g. 0, 1, ...):

<select-box
  options="complex"
  ng-model="model"
  track-by="$index"
  label-by="name"
  on-change="updateModel(value)"
></select-box>

Complex options, tracked by ID property value (e.g. 1, 2, ...):

<select-box
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  on-change="updateModel(value)"
></select-box>

Complex options, tracked by ID property value, but returned as object:

<select-box
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  as-object="true"
  on-change="updateModel(value)"
></select-box>

Complex options, tracked by ID property value, nullable with specified null value and label:

<select-box
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  is-nullable="true"
  null-label="'None'"
  null-value="0"
  on-change="updateModel(value)"
></select-box>

Check boxes

For check boxes, the value passed to the on-change handler is always an array of checked values. The model value is also expected to be an array.

Simple options, tracked by option value (e.g. Option 1, Option 2, ...):

<check-boxes
  options="simple"
  ng-model="model"
  on-change="updateModel(value)"
></check-boxes>

Simple options, tracked by index of option in array (e.g. 0, 1, ...):

<check-boxes
  options="simple"
  ng-model="model"
  track-by="$index"
  on-change="updateModel(value)"
></check-boxes>

Simple options, disabled:

<check-boxes
  options="simple"
  ng-model="model"
  ng-disabled="true"
  on-change="updateModel(value)"
></check-boxes>

Simple options, required:

<check-boxes
  name="fieldName"
  options="simple"
  ng-model="model"
  ng-required="true"
  on-change="updateModel(value)"
></check-boxes>

Complex options, tracked by index of option in array (e.g. 0, 1, ...):

<check-boxes
  options="complex"
  ng-model="model"
  track-by="$index"
  label-by="name"
  on-change="updateModel(value)"
></check-boxes>

Complex options, tracked by ID property value (e.g. 1, 2, ...):

<check-boxes
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  on-change="updateModel(value)"
></check-boxes>

Complex options, tracked by ID property value, but returned as object:

<check-boxes
  options="complex"
  ng-model="model"
  track-by="id"
  label-by="name"
  as-object="true"
  on-change="updateModel(value)"
></check-boxes>

Check box (for boolean values)

Standard:

<check-box
  ng-model="model"
  on-change="updateModel(value)"
>Label for checkbox</check-box>

Inverse (e.g. appears checked when model value is false):

<check-box
  ng-model="model"
  is-inverse="true"
  on-change="updateModel(value)"
>Label for checkbox</check-box>

Disabled:

<check-box
  ng-model="model"
  ng-disabled="true"
  on-change="updateModel(value)"
>Label for checkbox</check-box>

Required:

<check-box
  ng-model="model"
  ng-required="true"
  on-change="updateModel(value)"
>Label for checkbox</check-box>

Issues & feature requests

Please report any bugs, issues, suggestions and feature requests in the @meanie/angular-form-controls issue tracker.

Contributing

Pull requests are welcome! If you would like to contribute to Meanie, please check out the Meanie contributing guidelines.

Sponsor

This package has been kindly sponsored by Hello Club, an all in one club and membership management solution complete with booking system, automated membership renewals, online payments and integrated access and light control. Check us out if you happen to belong to any kind of club or if you know someone who helps run a club!

License

(MIT License)

Copyright 2015-2020, Adam Reis