I’m trying to trigger field validation of a composite component upon form submission and can’t seem to get it to work. The component is a simple input field with a red error text underneith to guide on the validation error.
I’m able to trigger validation onBlur and remove it onFocus from within the composite component, however, I’m trying to validate fields that weren’t touched upon form submission. So when the user clicks on the ‘Create’ button on the form, I want to run another validation to cover cases where onBlur wasn’t called for fields that were not touched.
I was looking for a way to trigger event from outside of the component but I don’t think that’s possible…
So I tried doing this by adding a property to the composite field and trigger validation onChange of the property variable, but that doesn’t work cos only the root component of the composite has the onChange event, and that component doesn’t seem to have any of the values of the field’s properties (so the value property is undefined at the root of the composite component).
Any idea how to trigger this validation?
Hi, just an idea, you could create private variables for the properties that you want to change or check on validation, and bind them to the properties of the composite’s child components. Then you could listen to internal property changes on the canvas, and trigger changes in the private variables based on that. Would that work?
Thanks @Mari, I almost got it to work, using an internal property called ‘validate’ that I bind with the ‘disabled’ property of the input field (just because I’m not using this property). I then capture the onChange event of that property on the input component, and am able to trigger validation upon clicking the submit button on the form (even without changing the disabled value, just updating it again to ‘false’), but for some weird reason I don’t get any of the internal properties values inside the composite component when onChange is triggered, so the value field to validate is undefined… any idea why that is?
Important to mention that I am trying to validate fields that I haven’t touched, so maybe they are not initialized with any value, and only get the value when tapped? The properties I send to the component are initialized with a value (e.g. I have is_mandatory property that is initialized as TRUE).