Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

  • Form

Index

Constructors

constructor

  • new Form(connection: ClientConnection, readOnly: boolean): Form

Properties

Private connection

connection: ClientConnection

Private formValueObservers

formValueObservers: onFormValueChangeHandler[] = []

readOnly

readOnly: boolean

Private readOnlyObservers

readOnlyObservers: onReadOnlyChangeHandler[] = []

Methods

getValue

  • getValue<FormModel>(): Promise<Body<FormModel>>
  • Get the current model state of all the fields in the form.

    Type parameters

    • FormModel = {}

    Returns Promise<Body<FormModel>>

onFormValueChange

  • Allows you to provide a callback to be executed after the form value changes. This method can be chained to append multiple callbacks.

    Parameters

    Returns Form

    Form

    Example

    const container = document.querySelector('.container');
    const submitBtn = document.querySelector('.submitBtn');
    
    sdk.form
     .onFormValueChange(setActiveClass)
     .onFormValueChange(enableSubmit);
    
    function enableSubmit(formValue)  {
      const isEmpty = Object.keys(formValue).length === 0;
      submitBtn.disabled = isEmpty;
    }
    
    function setActiveClass(formValue) {
      const hasTitle formValue?.title !== undefined;
      container.classList[hasTitle ? 'add' : 'remove']('active');
    }
    

onReadOnlyChange

  • Allows you to provide a callback to be executed after the readonly state changes. This method can be chained to append multiple callbacks.

    Parameters

    Returns Form

    Form

    Example

    const container = document.querySelector('.container');
    const inputs = Array.from(document.querySelectorAll('input'));
    
    sdk.form
     .onReadOnlyChange(setReadOnlyClass)
     .onReadOnlyChange(disableInputs)
    
    function disableInputs(readOnly)  {
      inputs.forEach(input => {
        input.style.pointerEvents = readOnly ? 'none' : ''
      })
    }
    
    function setReadOnlyClass(readOnly) {
      container.classList[readOnly ? 'add' : 'remove']('read-only')
    }
    

Legend

  • Constructor
  • Property
  • Method
  • Private property
  • Private method
  • Property
  • Inherited property
  • Protected property

Generated using TypeDoc