Implemented: design doc for DxpForm proposed component(#420)#422
Implemented: design doc for DxpForm proposed component(#420)#422ymaheshwari1 wants to merge 3 commits into
Conversation
|
|
||
| ## DxpForm | ||
|
|
||
| This component handles creation and validation of the forms in the app. It hides the logic for form creation and validation from the developers and they can directly define the form elements and pass the schema in this component that renders a Ionic form to be used in the app. |
There was a problem hiding this comment.
| This component handles creation and validation of the forms in the app. It hides the logic for form creation and validation from the developers and they can directly define the form elements and pass the schema in this component that renders a Ionic form to be used in the app. | |
| This component handles creation and validation of the forms in the app. It abstracts the logic for form creation and validation from the developers and they can directly define the form elements and pass the schema in this component that renders a Ionic form to be used in the app. |
|
|
||
| | Name | Description | | ||
| | --- | --- | | ||
| | submitForm | Trigged when the form is submitted by the user | |
There was a problem hiding this comment.
Focused, Blurred, Valid, Invalid and I think we can discuss a few more
| 'required' | ||
| 'email' | ||
| 'number' | ||
| 'mobile' (10–15 digits, optional +) |
There was a problem hiding this comment.
can the user select from a list of mobile local validations?
There was a problem hiding this comment.
For now its not configurable, but will create a separate ticket to make it more configurable.
| { type: 'minLength' | 'maxLength', value: number } (for strings) | ||
|
|
||
|
|
||
| All the elements will be displayed in ion-list wrapped by ion-item. |
There was a problem hiding this comment.
| All the elements will be displayed in ion-list wrapped by ion-item. | |
| All the elements will be displayed in ion-items wrapped by ion-list. |
|
|
||
| ```html | ||
| <template> | ||
| <DxpForm :schema="{}" :fabSaveButton="true" :blockSaveButton="false" /> |
There was a problem hiding this comment.
I think the save button should only have one option, use the default or provide a custom button. field is something like:
saveButtonId: ""
In this the user passes the element id of their save button where the action is attached. Internally the component should go to that button and add the form id to that button during code compile
There was a problem hiding this comment.
@dt2patel Sir, as discussed, I am exploring on this and it seems like fab-button does not work like a normal button with form.
An ion-fab-button cannot be directly bound to a form for submission in the same way a standard ion-button with type="submit" can. This is because the ion-fab-button component lacks the internal logic to handle form submissions, which is present in ion-button.
2 participants
Related Issues
#420
Short Description and Why It's Useful
Added basic documentation for DxpForm component and added its implementation details
Screenshots of Visual Changes before/after (If There Are Any)
Is the changes contains any breaking change?
If there are any breaking change include those in the release notes file
Contribution and Currently Important Rules Acceptance