Skip to content

Halo-Lab/angular-getform

Repository files navigation

To start project locally you need to run :

1) npm i
2) ng serve

If you want to add some changes to ng-getfrom and see latest version you must run command :

ng build @halo-lab/ng-getform --watch

If you need to create production build of @halo-lab/ng-getform you must run :

ng build @halo-lab/ng-getform --configuration=production

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

Supported by Halo lab

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published