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


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

1 answer



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.message = "Please give a role";



return formController

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


and use the property in the submit

$form.$invalid || ! formController.enableSubmit

Have a complete example here:

Hope this help,