Dynamically control whether the attribute is required

General
1

How to dynamically modify the required value of a field to dynamically control whether the attribute is required。

    oneditprepare: function () {
            $("#node-input-payloadType").change(()=>{
                console.log('$("#node-input-payloadType").val()',$("#node-input-payloadType").val());
                if($("#node-input-payloadType").val()==='default'){
                    this._def.defaults.datasource.required=false;
                }else{
                    this._def.defaults.datasource.required=true;
                }
            });

    }

I tried to use the code shown above and it didn't work.

2

I did this in my node-red-contrib-image-tools image node.

When building the typedinput, I check a property and add or don't add the validator.

Line 508...

3

@Steve-Mcl
Hello
I want to dynamically change the required value. Triggered by button click, required: true when certain conditions are met, false if other conditions are met

Thanks

4

The validation can be a function. So your button should set a variable and then you write a function that reads the variable to know whether the return is true or false.

5

Just to be clear, you cannot dynamically change the required flag. You must use a custom validation function as has been suggested.

6

@knolleary
hi，
I tried it according to the method you said. It is possible to complete this function. However, it is still a little problem. I have recorded the screen and I don’t know how to share it with you.

7

Publish to YouTube and share a link? Upload to Google photos and share a link? Put it on a file hosting site and share a link?

8

Not sure what a video will demonstrate that you can't just describe. You have not shared what you have tried setting your validate function to. You have not described what behaviour you want. A video isn't going to provide that information.

9

So as I posted to a link where I demonstrate using a function to validate (based on if the parameter is optional or not) and the suggestion by others, the key to enabling/disabling validation is in the validate function.

Example, if you add a validate function and return true - validation will pass. Based on that knowledge, use a flag to override the check.

E.g when you setup your typedinput, add a validate function....


let opts = {
                    default: 'msg',
                    typeField: $('#myTypedInputType'),
                    types: ['str', 'msg'],
                    validate: function(v) { 
                        let dontValidate = !$('#checkbox').val();
                        if(dontValidate){
                            return true;//don't validate, just return true. 
                        }
                        return  !!v;//do validation
                    }
                };

                let $ti = $('#myTypedInput');
                $ti.typedInput(opts);
10

11

As shown in the video above, the last item in the dialog-form has a hidden item called datasource. The default is default. When it is default, the datasource is hidden and not verified. When it is a datasource, the datasource is displayed and verified.
In the current phenomenon, when datasource is selected, the result of the verification is false, which should be displayed in the red verification box. The page end is not rendered. You need to enter any other field that is not verified, and re-verify to display the red verification box with the datasource verification false.

            datasource: {
                value: "",
                //type: "graphql-data",
                //required: false
                validate: function() {
                    debugger
                    let pt = $("#node-input-payloadType").val();
                    let ds = $("#node-input-datasource").val();
                    let rlt;
                    pt === "datasource" && ds === "" ? rlt = false : rlt = true
                    console.log('validate_result', rlt);
                    return rlt;
                }



            }
12

@Steve-Mcl @knolleary @TotallyInformation
Thank you very much for your patience and answer!

13

I've never seen this arrangement of JS before.

I suspect it should be...

rtl = (pt === "datasource" && ds === "") ?  false :  true;
14

I have modified it as you said, but the phenomenon remains.
The debug information of the browser in the video has validata_result. When the first time is false, no red verification box is displayed. Only the second time