@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 ✌️