Reactive Form Built-in validation inside block doesn't work
Question
Application Type
Reactive

Hi all,

I am trying to use the built-in validation of a form inside of a block, but for some reason this validation does not work. There is a button on the parent page which is used to navigate to the next page if all mandatory fields (inside the block) are valid. However, when I press the "Next" button, I can navigate to the next screen even when mandatory fields in the block's form are not filled in. 

I built it in the following way: inside the block, I have a client action named CheckInputIsValid (see attachment), which is called in the OnAfterFetch on the aggregate in that block (runs at start) and in the OnChange-actions of the input fields of the form. This action calls an event with a boolean input parameter (PrivatePersonFormValid), that should inform the parent page about whether the form is valid. Subsequently, on the parent page there is a handler which checks if the event's input parameter is valid: if that is true, the user can navigate to the next page with the button (that button has the Built-in Validations property set to Yes).

The problem seems to be in the block with the form: somehow, when I leave mandatory fields empty and then debug that action, it returns that the form is valid, while I expect it would be invalid.

Does anyone have an idea about how I can make the built-in validation of the form work?

Thank you in advance.

Screenshot20210318135712.png

Hi Erwin de Brouwer

Try this way... Use the block inside of the form... Move only the inputs to the block, and the button and the form on the parent block. Something like in the screenshot.



Regards

Gonçalo Almeida

Really simple solution and it actually works! Thanks a lot!

mvp_badge
MVP

Hi Erwin,


That's a good question. I recall a the Enhanced Web blocks - Reactive forge component which is made to overcome this limitation:


The component has a Demo to lead you on how to use it to cover form validation within blocks, perhaps something you want to take a look at.


Kind Regards,
João

Hi Erwin de Brouwer

Try this way... Use the block inside of the form... Move only the inputs to the block, and the button and the form on the parent block. Something like in the screenshot.



Regards

Gonçalo Almeida

Really simple solution and it actually works! Thanks a lot!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.