Using npm:
npm i @uzum-tech/account-formUsing yarn:
yarn add @uzum-tech/account-formUsing jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/@uzum-tech/account-form/lib/main.iife.js"></script>Using unpkg
<link rel="stylesheet" href="https://unpkg.com/@uzum-tech/account-form/lib/style.css">
<script src="https://unpkg.com/@uzum-tech/account-form/lib/main.iife.js"></script>Default value source: 1
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div data-account-form data-source="-1" style="width: 530px"></div>
</body>
</html>Script
import '@uzum-tech/account-form/lib/style.css';
import AccountForm from '@uzum-tech/account-form';
new AccountForm('[data-account-form]');import AccountForm, { AccountFormEvent, AccountApplication } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
const handleAccountFormSubmit = (payload: AccountApplication) => console.log(payload);
// Add listener
accountForm.addListener(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);
// Remove listener
accountForm.removeListener(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);
// Remove all listener
accountForm.removeAllListeners(
AccountFormEvent.SUBMIT,
handleAccountFormSubmit
);Events from AccountFormEvent:
| Value | Payload | Description |
|---|---|---|
| SUBMIT | AccountApplication | Will fire after successful validation, before sending the request |
| ERROR_RESPONSE | AccountApplication | Will fire after an unsuccessful response |
| SUCCESS_RESPONSE | AccountApplication | Will fire after a successful response |
| FINALLY_RESPONSE | AccountApplication | It will always work after the response |
| VALIDATE | AccountApplicationFormValidationResult | It will work after the form is validated, before sending the request. Validation status is available in the event payload |
| BLUR | AccountApplicationFieldBlurResult | Will fire after removing focus from any field inside the form |
| TOGGLE_TIN_OR_PINFL | boolean | Will fire after toggle 'Не помню ИНН или ПИНФЛ' checkbox |
| TOGGLE_ACCEPT_CHECKBOX | boolean | Will fire after toggle 'Я соглашаюсь на обработку персональных данных' checkbox |
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// Show/hide single field
accountForm.showFields('name');
accountForm.hideFields('name');
// Show/hide multiple fields
accountForm.showFields('name', 'phone');
accountForm.hideFields('name', 'phone');import AccountForm, { AccountProduct } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.setDefaultFields({
product: AccountProduct.ACCOUNT_IN_SOUMS
});- If you return a non-empty string, it will be displayed as error text.
- If nothing is returned, the response will be considered successful
import AccountForm, { AccountApplication } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.onRequest = (payload: AccountApplication) => {
// Logic for sending the request
};- updates the mask
- updates localization
- if necessary, trims the original field value
- emits the event
TOGGLE_ACCEPT_CHECKBOX
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// To support both INN and PINFL
accountForm.withPinfl();
// To leave only the INN
accountForm.withoutPinfl();- by default version is 2.0
- version will send in header
X-Api-Version
import { ApiVersion } from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// Change version
accountForm.apiVersion = ApiVersion.v3; // Available keys - v1-v4
// Clear version in order to remove X-Api-Version header
accountForm.apiVersion = undefined;- If you want to handle the response you can pass the function
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.onResponse = (response: ApiResponse<ELMAResponse>): void => {
// Logic for handling the response
};- If you want to update text of send button, you can use method
setSendButtonLocale - The method accepts
textas a text, that should be replaced - BE CAREFULL: After changing text, there will be no 'reactive' locale on button. That means that changing language will not force any changing in text.
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
accountForm.setSendButtonLocale('Book a call');| Property | Type | Readonly |
|---|---|---|
| acceptChecked | boolean | Yes |
| hideTINOrPINFLChecked | boolean | Yes |
| lang | string | No |
| productValue | AccountProduct | null | No |
| buttonLoading | boolean | No |
import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you don't need to show alert then change the value to false
accountForm.autoShowAlert = false;import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you need submit with validations and all other handlers
accountForm.submit();
// If you need request only without handlers
accountForm.requestOnly();import AccountForm from '@uzum-tech/account-form';
const accountForm = new AccountForm();
// If you need disable auto reset after submit
accountForm.autoReset = false;
// If you need reset manually
accountForm.resetForm();