Adding "required: true" to form validation doesn't let me set values programatically

[Lynn]

I have a grid that has some data, and when I press an "edit" button, I want a wizard with forms to edit the contents over multiple pages. Because of all the binding, I figured I could re-use the same wizard and popup and just reload the data inside. This works pretty well until I add validation. For some reason setting model data results in the value being NULL inside the model.

const model = discountWizard.steps()[0].form.editable.options.model;
model.set("requiredField", "required"); // required: true in form
model.set("optionalField", "optional"); // required: false in form

// results in 
dirtyFields: Object { requiredField: false, optionalField: true }
optionalField: "optional"
requiredField: null

I've added a reproducer in Dojo: https://dojo.telerik.com/eQoGApIL

How can I fix this?

 

On a sidenote, the reset button doesn't seem to do anything by default, is that intended?

[Lynn]

Minor addition, it seems that this behavior is caused by "validateOnBlur" being set to true. While this still shouldn't happen, it seems to work when I disable this.

validatable: {
    validateOnBlur: false,
},

[Neli]

Hello Lynn,

I would suggest you define the model and set the correct type for the fields. 

var Person = kendo.data.Model.define({
          fields: {
              "requiredField": {
                  type: "string"
              },
              "optionalField": {
                  type: "string"
              }
          }
      });
      
      var data = new Person({
        requiredField: "",
        optionalField: "",
      });

Here is the modified Dojo example where model.set works as expected for the requiredField.

I hope you will find the provided suggestion helpful for resolving the issue.

Regards,

Neli
Progress Telerik

[Lynn]

That seems to work, thanks!

If I understand the problem correctly, in the default scenario the form generates a model on the fly and copies the validation rules of the form into the run-time generated model, causing it to behave like this. When you define your own model, you explicitly disable the model validation and rely on just the form, meaning it won't validate in the same odd way blocking setting data?

[Lynn]

Okay I'm taking that back, the validation stopped working in the above example. If I add the validation to the model I'm back to square 1.

[Neli]

Hello Lynn,

You could also try in the initial example to set the initial value in the formData to be different than null or empty string.

form: {
            formData: {
              requiredField: "initial", //or other non-empty string
              optionalField: "initial",
   },

Here is the modified Dojo example. 

In case you have additional questions on the issue I would suggest you keep the conversation in a single thread.

I hope this helps.