how to disable a button for javascript expression variable in UI designer

Q&A
1

I am a beginner working on a project.

I have created a JavaScript expression that checks for null values in form input and displays in a text widget with red CSS.

The submit button in the instantiation form  already have Disabled as "$form.$invalid" it works for other required validations,angular css 

but for this JavaScript expression message is displayed if the values are null and  message does not display if the value is not null but 

button is enabling though iam not getting values in JavaScript expression 

My expression :return $data.formInput.configBdgtWiseApproverInput.approverRole ===null &&  $data.formInput.configBdgtWiseApproverInput.approverGroup ===null;

in button disabled is $form.$invalid

Please suggest

 

2

Hello,

What I do in general is a formController variable.

This javascript return a JSON

var formControler = { 'enableSubmit' : true, 'message': '' }

// do all the control

if (! $data.formInput.configBdgtWiseApproverInput.approverRole) {

 formControler.enableSubmit=false;

formControler.message = "Please give a role";

}

....

 

return formController

And that's it! So you can display the message in a Text Widget

{{formController.message}}

and use the property in the submit

$form.$invalid || ! formController.enableSubmit

 

Have a complete example here:

https://youtu.be/M9Y8xaHZFRo

Hope this help,