formChange losing selected value

Radzen Studio Angular
1

Hi,

I’m trying to set visibility of some fields of my form. I’ve created boolean properties for each field to set the visibility of them as the user changes the value of “Tipo” field. When the user selects a value of the “Tipo” field then form0Change event is fired an the visibility of the fields are changed as expected. The problem is the value of the “Tipo” field is lost. You can see the code below.

form0Change(event: any) {
super.form0Change(event);

    if (event.property != "Tipo") {
        return;
    }
    if (this.form0.form.controls.Tipo.value == '1' ||
        this.form0.form.controls.Tipo.value == '3' ||
        this.form0.form.controls.Tipo.value == '4' ||
        this.form0.form.controls.Tipo.value == '5') {
        this.origemVisible = true;
        this.destinoVisible = true;
        this.entradaVisible = false;
        this.saidaVisible = false;
        this.referenciaVisible = false;
    } else if (this.form0.form.controls.Tipo.value == '2') {
        this.origemVisible = false;
        this.destinoVisible = false;
        this.entradaVisible = true;
        this.saidaVisible = true;
        this.referenciaVisible = false;
    } else if (this.form0.form.controls.Tipo.value == '6' ||
               this.form0.form.controls.Tipo.value == '7') {
        this.origemVisible = false;
        this.destinoVisible = false;
        this.entradaVisible = false;
        this.saidaVisible = false;
        this.referenciaVisible = true;
    } else {
        this.origemVisible = false;
        this.destinoVisible = false;
        this.entradaVisible = false;
        this.saidaVisible = false;
        this.referenciaVisible = false;
    }
}
2

The event argument of the form’s Change event contains the value e.g. event.value - there is no need to use this.form0.form.controls.Tipo.

What does ‘loses its value’ mean in this case? Can you create a sample page which demonstrates this behavior?

3

You can see the issue below. When i select a value of the field "Tipo", it loses the selected value.

image
image.png698×512 31 KB

4

image
image.png697×475 22.2 KB

5

I’ve changed the code and it still have the same issue.

if (event.property == “Tipo”) {
if (event.value == ‘1’ ||
event.value == ‘3’ ||
event.value == ‘4’ ||
event.value == ‘5’) {
this.origemVisible = true;
this.destinoVisible = true;
this.entradaVisible = false;
this.saidaVisible = false;
this.referenciaVisible = false;
} else if (event.value == ‘2’) {
this.origemVisible = false;
this.destinoVisible = false;
this.entradaVisible = true;
this.saidaVisible = true;
this.referenciaVisible = false;
} else if (event.value == ‘6’ ||
event.value == ‘7’) {
this.origemVisible = false;
this.destinoVisible = false;
this.entradaVisible = false;
this.saidaVisible = false;
this.referenciaVisible = true;
} else {
this.origemVisible = false;
this.destinoVisible = false;
this.entradaVisible = false;
this.saidaVisible = false;
this.referenciaVisible = false;
}
}

6

Try setting the UpdateDataOnChange property of the Form to true in order to see if this makes a difference.

7

Setting the UpdateDataOnChange property of the form to true didn’t solve the problem.

8

I created a simple application that successfully hides form fields based on a dropdown value. Could you modify that application so it starts behaving as in your case?hide-form-fields.zip (3.7 KB)

9

My version is community edition.

10

I have tested and the behaviour of Korchev’s code is the same: after selecting dropdown value the field becomes visible but dropdown value resets to null.

1 Like
11

I saw what you mean and confirm this is not normal. Will investigate further and report our findings.

Meanwhile here is a workaround:

  1. Data-bind the form to a page property (set its Data property):
  2. Set the UpdateDataOnChange property to true.

Attached is an updated project with the aforementioned changes.

hide-form-fields.zip (5.6 KB)

12

This was meant for another thread and isn’t related to the issue discussed here.

1 Like
13

Quick update. This turned out to be a missing feature/implementation detail. When you hide or show a form field it reinitializes the form which in turn loses the current state unless the Data property and UpdataDataOnChange are set. We will try to address that.

14

Thanks korchev,

It’s very important to solve this issue since it’s a common behaviour needed in all kinds of application.

15

Hi. Was this addressed. My entire prototype that I need to complete in advance of purchasing multiple licenses - is based on this requirement. Thank you.

16

Yes, the problem was fixed immediately.