Popup Form
Overview
A popup form is a type of form that appears as a small overlay on top of the content triggered by a user action such as clicking a button.
Properties
name
string
Component name
value
object
Key value object
valid
boolean
Indicates if the component is valid
validating
boolean
Indicates if the component is validating
Methods
open
–
void
Open modal window
close
–
void
Close modal window
setValue
data: object
void
Set component data. Data is an object with arbitrary structure.
setSubmitButtonDisabled
disabled:
boolean
void
Disable or enable the submit button
reset
–
void
Reset component to the initial value
validate
–
void
Trigger form validation
resetValidation
–
void
Clear validation errors
setErrors
errors: {
[key: string]:
string } | null
void
Mark the component as invalid and display errors
setOpenButtonDisabled
disabled:
boolean
void
Disable or enable the open button
submit
–
void
Trigger submit event
Triggers
On Init
Triggered when the component is initialized
On Submit
Triggered when the component data is submitted
On Click
Triggered when the component is clicked
On Change
Triggered when the component's state changes
On Custom Button Click
Triggered when the custom button is clicked
On Open
Triggered when the component is opened
On Close
Triggered when the component is closed
Working with the component
You can cuztomize the component using its settings in the right side panel. From there, you can, for example:
Hide the component
If necessary, you can hide the popup button to save space and open or close the form programmatically by selecting the Hide button checkbox.
Add a custom button to the form
By default, the component contains only a single Submit button. But you can also add a custom button to the form and customize it using the Show custom button setting.
Reset the form on close
By default, the component resets its content on submission but retains it if the form is closed. But, if required, you can modify this behaviour using the Reset on close setting.
Last updated
Was this helpful?