I have a vuejs application and where I can dynamically add rows with some input fields (langugeId, type and name). Those are required fields. I am using vue-tiny-validate for validation library.
My idea is that every time I add/remove a line I regenerate the number of rules.
When I click the save button the function got called, the $test() function executes, but the $invalid valid property is always false. Putting breakpoint in every rule test function, the code never hit them (it should!).
const createAttachmentRules = (attachments) => {
const rules = {};
attachments?.forEach((attachment, index) => {
rules[index] = {
type: {
name: 'required',
test: value => Number(value) >= 0,
message: props.translation('Validation.Required')
},
languageId: {
name: 'required',
test: value => Number(value) >= 0,
message: props.translation('Validation.Required')
},
name: {
name: 'required',
test: value => !!value,
message: props.translation('Validation.Required')
}
};
});
return reactive(rules);
};
const attachmentRules = createAttachmentRules();
const { result } = useValidate(state.attachments, attachmentRules, validationOptions);
watch(() => state.attachments, (updatedAttachment) => {
Object.assign(result, createAttachmentRules(updatedAttachment));
});
const onSaveAsync = async (moveToNextTab = false) => {
await result.value.$test();
if (result.value.$invalid) {
return;
}
}
thnx