Hi Thomas,
Regarding the datepicker, we would recommend using readonly prop since you can ensure the date-format is strictly followed when a user select a value.
Without readonly
prop, for now we have 2 options, the user have to click on the selected date or you can enable showFooter
option to notify user that they have to click on Update to ensure the date is updated.
Meanwhile we are checking the feasbility to enable the date to be updated automatically once the user types in the textbox and press Enter
.
Regarding Form-Control validation,
I tried with the below code and am able to see the field errors returned from the validate fn shown when you call doSubmit. Can you please compare this with your code and let us know if you are missing something ?.
Thanks.
<div id="form-container">
<button id="submit">Submit</button>
<button id="reset">Reset</button>
</div>
<script type="application/javascript">
var form = document.createElement('fw-form');
var formContainer = document.querySelector('#form-container');
document.querySelector('#submit').addEventListener('click', async (e) => {
const { values, isValid } = await form.doSubmit(e);
console.log({ values, isValid });
});
document.querySelector('#reset').addEventListener('click', (e) => {
form.doReset(e);
});
var validatef = async (values) => {
// do custom validation and return error or {}
console.log(values);
return {
first_name: "Invoice number is required",
};
};
var formSchema = {
name: 'Test Form',
fields: [
{
id: '2978f820-704b-46c7-9f88-110e14e34a8c',
name: 'first_name',
label: 'First Name',
type: 'TEXT',
position: 3,
required: true,
placeholder: 'Enter…',
hint: 'Please provide a text of at max 100 characters',
choices: [],
},
{
id: '3978f820-704b-46c7-9f88-110e14e34a8c',
name: 'last_name',
label: 'Last Name',
type: 'TEXT',
position: 3,
required: true,
placeholder: 'Enter…',
hint: 'Please provide a text of at max 100 characters',
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'landmark',
label: 'Landmark',
type: 'PARAGRAPH',
position: 7,
required: true,
Placeholder: 'Enter some text…',
hint: 'Please enter the nearest landmark',
choices: [],
},
{
id: 'f319f86f-1b6a-49cb-b4b6-cf487be94595',
name: 'pincode',
label: 'Pincode',
type: 'NUMBER',
position: 8,
required: false,
Placeholder: 'Enter…',
hint: 'Please enter your Pincode',
choices: [],
}
],
};
var initialValues = {
};
formContainer.prepend(form);
form.formSchema = formSchema;
form.initialValues = initialValues;
form.validate = validatef;
</script>