ais-form-components v0.1.7

AIS Form Components

This library provides some generic form components used in AIS projects.

Components

A list of the available components is below.

Autocomplete

<form-autocomplete
  [control]="form.get('test')"
  [data]="data"
  label="Autocomplete"
  hint="This is a hint!"
  (selected)="select($event)"
></form-autocomplete>

Checkbox

Single Checkbox

<form-checkbox
  [control]="form.get('test')"
  label="Checkbox"
  hint="This is a test hint!"
></form-checkbox>

Multiple Checkbox

<form-checkbox
  [control]="form.get('test')"
  [multiple]="true"
  [data]="data"
  label="Checkbox"
  hint="This is a test hint!"
></form-checkbox>

Damage Selector

<form-damage-selector
  [control]="form.get('test')"
  label="Damage Selector"
  hint="This is a hint!"
></form-damage-selector>

Email

<form-email
  [control]="form.get('test')"
  label="Email"
  hint="This is a hint!"
  placeholder="Email"
></form-email>

Email Input Group

<form-email
  [control]="form.get('test')"
  label="Email"
  hint="This is a hint!"
  placeholder="Email"
>
  <form-prefix>
    <span class="input-group-text">
      @
    </span>
  </form-prefix>

  <form-suffix>
    <span class="input-group-text">
      .com
    </span>
  </form-suffix>
</form-email>

File

<form-file
  [control]="form.get('test')"
  label="File"
  hint="This is a hint!"
></form-file>

Number

<form-number
  [control]="form.get('test')"
  label="Number"
  hint="This is a hint!"
  placeholder="Number"
></form-number>

Number Input Group

<form-number
  [control]="form.get('test')"
  label="Number"
  hint="This is a hint!"
  placeholder="Number"
>
  <form-prefix>
    <span class="input-group-text">
      #
    </span>
  </form-prefix>
</form-number>

Phone

<form-phone
  [control]="form.get('test')"
  label="Phone"
  hint="This is a hint!"
  placeholder="Phone"
></form-phone>

Phone Input Group

<form-phone
  [control]="form.get('test')"
  label="Phone"
  hint="This is a hint!"
  placeholder="Phone"
>
  <form-prefix>
    <span class="input-group-text">
      #
    </span>
  </form-prefix>
</form-phone>

Radio

<form-radio
  [control]="form.get('test')"
  [data]="data"
  label="Radio"
  hint="This is a test hint!"
></form-radio>

Select

<form-select
  [control]="form.get('test')"
  [data]="data"
  label="Select"
  hint="This is a test hint!"
></form-select>

Multi-Select

<form-select
  [control]="form.get('test')"
  [data]="data"
  [multiple]="true"
  label="Select"
  hint="This is a test hint!"
></form-select>

Select Dialog

<form-select-dialog
  [control]="form.get('test')"
  [data]="data"
  label="Select Dialog"
  hint="This is a test hint!"
></form-select-dialog>

Signature Pad

<form-signature-pad
  [control]="form.get('test')"
  label="Signature Pad"
  hint="This is a test hint!"
></form-signature-pad>

Switch

<form-switch
  [control]="form.get('test')"
  label="Switch"
  hint="This is a test hint!"
></form-switch>

Text

<form-input
  [control]="form.get('test')"
  type="text"
  label="Text"
  hint="This is a hint!"
  placeholder="Text"
></form-input>

Text Input Group

<form-input
  [control]="form.get('test')"
  type="text"
  label="Text"
  hint="This is a hint!"
  placeholder="Text"
>
  <form-prefix>
    <span class="input-group-text">
      Dr
    </span>
  </form-prefix>
</form-input>

Textarea

<form-textarea
  [control]="form.get('test')"
  label="Textarea"
  hint="This is a hint!"
  placeholder="Textarea"
></form-textarea>

Timepicker

<form-timepicker
  [control]="form.get('test')"
  label="Timepicker"
  hint="This is a hint!"
  placeholder="Timepicker"
></form-timepicker>