@halo-lab/ng-getform

To install package

npm install @halo-lab/ng-getform

To use the components

import { NgGetform, Input , Button, Checkbox, Select, RadioGroup } from '@halo-lab/ng-getform';

• add imported component to imports in your component

  imports: [ NgGetForm, Input, Button, Checkbox, Select, RadioGroup]

Button accepts parameters

| Property | Type | Necessity | Description | | :-------- | :------- | :-------- | :-------------------------------------------------------------------------------------------------- | | btnLabel | string | required | Text inside button | | btnType | string | optional | Type of button ('filled' or 'stroke'). Also can be 'wide' ( width : 100%). Default value - 'filled' | | className | string | optional | Class name for custom styling |

You can add events listeners directly on <lib-button> component.

Input accepts parameters

| Property | Type | Necessity | Description | | :---------- | :------------------------------------------------------------ | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | control | FormControl | required | Variable which control input value (new FormControl(yourValue : string)). Actually you can use all methods that are avalilable with Angular FormControl | | inputId | string or number | required | Unique ID of an input field | | label | string | optional | The label of an input | | placeholder | string | optional | Input placeholder (by default equal to label) | | validator | {type: string, message: string, value?: string or number}[] | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: for max, min, maxLength, minLength, pattern validators}. Validator's types may be: required, email , number , maxLength, minLength, max, min, pattern. For example: [ { type: 'required', message: 'Required field' },{ type: 'minLength', message: 'At least 2 characters', value: 2 },{ type: 'pattern', message: 'Only letters', value: '[a-zA-Z]+' }] | | multiRows | boolean | optional | When equal true, will be rendered <textarea>, otherwise a <input> | | type | string | optional | Input type (default 'text') | | className | string | optional | Class name for custom styling |

Checkbox accepts parameters

| Property | Type | Necessity | Description | | :-------- | :------------------------------------------------------------ | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | required | The name of an checkbox field | | label | string | required | The label of an checkbox | | control | FormControl | required | Variable which control checkbox value (new FormControl(yourValue : boolean)). Actually you can use all methods that are avalilable with Angular FormControl. | | validator | {type: string, message: string, value?: string or number}[] | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: requiredTrue. For example: [{name: "requiredTrue", message: "Please accept our terms"}]. | | className | string | optional | Class name for custom styling |

RadioGroup accepts parameters

| Property | Type | Necessity | Description | | :---------- | :------------------------------------------------------------ | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | name | string | required | The name of an radio group input | | label | string | required | he label of an radio group | | items | {name:string,value:string}[] | required | Array of options | | required | FormControl | required | Variable which control radio group value (new FormControl(yourValue : string or number)). Actually you can use all methods that are avalilable with Angular FormControl. | | validator | {type: string, message: string, value?: string or number}[] | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: required. For example: [{name: "required", message: "You must select one option"}]. | | orientation | string (vertical or horizontal) | optional | Property that allow you to control buttons group orientation. Default value : vertical | | className | string | optional | Class name for custom styling |

Select accepts parameters

| Property | Type | Necessity | Description | | :------------ | :------------------------------------------------------------ | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | placeholder | string | required | Question before select component | | options | string[] | required | Array of options | | control | FormControl | required | Variable which control radio group value (new FormControl(yourValue : string)). Actually you can use all methods that are avalilable with Angular FormControl. | | validator | {type: string, message: string, value?: string or number}[] | optional | Array of objects in the form of {type: validation type , message: text for unvalid tooltip, value?: string or number}. The validator's name may be: required. For example: [{name: "required", message: "Please select your favourite fruit"}]. | | searchEnabled | boolean | optional | Enable/disable search bar for select options | | className | string | optional | Class name for custom styling |

NgGetform accepts parameters

| Property | Type | Necessity | Description | | :-------------- | :---------------------------------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | targetUrl | string | required | The url of your endpoint on getform | | formGroup | FormGroup | required | A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. | | successCallback | Function | optional | Function that will be called after successful submission of the form data on getform.io | | className | string | optional | Class name for custom form styling |

Example of usage

HTML

  <lib-ng-getform
    [targetUrl]="'https://getform.io/your-getform-id'"
    [formGroup]="formGroup"
    [successCallback]="callback"
  >
    <lib-input
      [label]="'Name'"
      [placeholder]="'Please write your name'"
      [control]="formGroup.controls['name']"
      [validator]="[
        { type: 'required', message: 'Required field' },
        { type: 'minLength', message: 'At least 2 characters', value: 2 },
        { type: 'pattern', message: 'Only letters', value: '[a-zA-Z]+' }
      ]"
    ></lib-input>
    <lib-input
      [label]="'E-mail'"
      [placeholder]="'Please write your email'"
      [control]="formGroup.controls['email']"
      [validator]="[
        { type: 'required', message: 'Required field' },
        { type: 'email', message: 'Unvalid e-mail' }
      ]"
    ></lib-input>
    <lib-radio-group
      [label]="'Choose your favourite sport'"
      [orientation]="'vertical'"
      [items]="sportsOptions"
      [control]="formGroup.controls['sport']"
      [validator]="[
        { type: 'required', message: 'You need to select option!' }
      ]"
    ></lib-radio-group>
    <lib-select
      [placeholder]="'Choose your favourite fruit'"
      [searchEnabled]="true"
      [options]="fruitsArr"
      [control]="formGroup.controls['fruit']"
      [validator]="[{ type: 'required', message: 'Select one fruit!' }]"
    ></lib-select>
    <lib-checkbox
      [name]="'confirmation'"
      [label]="'Are you sure about that?'"
      [control]="formGroup.controls['confirmation']"
      [validator]="[{ type: 'requiredTrue', message: 'Must be checked' }]"
    ></lib-checkbox>
    <lib-button [btnLabel]="'Send Form'" [btnType]="'wide filled'"></lib-button>
  </lib-ng-getform>

TS

import { FormControl, FormGroup } from '@angular/forms';
import { NgGetform, Input , Button, Checkbox, Select, RadioGroup } from '@halo-lab/ng-getform'

formGroup: FormGroup = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    fruit: new FormControl(null),
    sport: new FormControl(null),
    confirmation: new FormControl(false)
  })

  sportsOptions: { name: string, value: string }[] =
    [{ name: 'soccer', value: 'soccer' },
    { name: 'hockey', value: 'hockey' },
    { name: 'tenis', value: 'tenis' },
    { name: 'basketball', value: 'basketball' },
    { name: 'formula 1', value: 'formula-1' }];
  fruitsArr: string[] = ['Banana',
    'Mango',
    'Pear',
    'Apple',
    'Orange'
  ];

  callback() {
    console.log('hello from callback');
  }

Word from author

Have fun ✌️