Form not sent if a select widget is left empty

Q&A
1

Hi all,
I have a problem with a form. I have in it two select widgets. One is mandatory while the second not. So, it could be live empty by an user. Furthermore, the “submit” button has a control such as $form.$invalid.
Now, when I test the form it happens that after have made a selection in the first select widget (because it is mandatory), the button becomes active but the form is not sent (and so my task does not go on) until I select a value also on the second select widget. The strange thing that I saw is:

  1. if I change the widget with a simple “text input”, the form is sent even if the field is empty
  2. with the second select widget, when I display the form, if I make a selection (so I select a value) and after that I change again the selection to the “empty” value, the form is sent to the application (and the record is write in the DB, of course with a “null” field.
    Further details:
    a. no mandatory fields are required in the DB or in the process contract
    b. I made some test also with another browser (Opera instead of IE) but I found the same issue.
    Can somebody explain to me what I am doing wrong?
    Thank you,
2

Angular expects a clean form and in that sense requires a select to have been selected.

The way round this is to create a custom Select Widget and FORCE it to be seen as clean whether or not it is selected.

You can read more here:

https://www.w3schools.com/angular/angular_validation.asp
http://www.angulartutorial.net/2016/04/disable-submit-button-until-all.html
http://www.benlesh.com/2012/11/angular-js-form-validation.html
https://scotch.io/tutorials/angularjs-form-validation

regards
Seán

PS: As this reply offers an answer your question, and if you like it, please Mark UP and/or as Resolved.

3

Dear Seán,

thank you very much for your answer. Now I understand the problem. I will study the contents that you suggested and I will find solution.

Regards,
Mauro

PROBLEM SOLVED