Form
<sc-form></sc-form>
This component let users create an form container.
- Preview
- Code
<sc-form><sc-input label="Required" required></sc-input><sc-button type="primary" submit>Submit</sc-button></sc-form>
Component Codex
Properties
Property | Description | Type | Default |
---|---|---|---|
novalidate | Prevent the form from validating inputs before submitting. | boolean | false |
Events
Event | Description | Type |
---|---|---|
scFormChange | Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with. | CustomEvent<Object> |
scFormSubmit | Backwards compat. | CustomEvent<void> |
scSubmit | Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with. | CustomEvent<void> |
Methods
getFormData() => Promise<FormData>
Serializes all form controls elements and returns a `FormData` object.
getFormJson() => Promise<Record<string, unknown>>
submit() => Promise<void>
validate() => Promise<boolean>
Shadow Parts
Part | Description |
---|---|
base | |
form |
Used By
- sc-cancel-survey
- sc-cart-form
- sc-customer-edit
- sc-login-form
- sc-login-provider
- sc-mollie-add-method
- sc-password-nag
- sc-product-price-modal
- sc-product-selected-price
- sc-stripe-add-method
- sc-subscription-ad-hoc-confirm
- sc-subscription-payment
- sc-subscription-payment-method
- sc-subscription-switch
- sc-subscription-variation-confirm
- sc-upcoming-invoice
- sc-wordpress-password-edit
- sc-wordpress-user-edit