Current filter:
                                You should refresh the page.
                                  • I'm having an issue with clearing validation from a control and loading a new backing source for the editor in Angular 4 without triggering validation again.

                                    On my form, I have a dx-text-box who's [value] is bound to a public field in the component. The validation on the textbox is a simple 'required' type. If I load a backing object to the form that has no value for that field, the validation does not trigger until a) validation is called through some means or b) a value is typed into the editor, deleted, then focus is lost. This is what I expect to happen in those cases.

                                    In the provided sample project, the Name field is required, but you can click inside the editor and then out to see that validation doesn't happen. If you type a value, then delete it and change focus, you will see validation happen.

                                    The trouble comes when I change the backing object after validation is triggered. If the original backing object has a value, but the next one does not, the validation still triggers for that field, although I would like it to act as though this is a brand new validation round.

                                    In the provided sample project, you can click the Swap button twice, once to load an object, then again to load a new object without that field set. The validation will trigger and the only way I've been able to deal with it is to put a manual Clear Validation button on the screen (this is in the sample).

                                    What I'd like to be able to do is swap backing objects and let the validation know that it should reset back to a normal state without clicking a separate button.

                                    Another part of this question has to do with timing. With the asynchronous nature of Reactive Observables in Angular 4, I'm having trouble finding a proper place to make the ValidationEngine.resetGroup() call in the proper place to give it the behavior that I desire.

                                    Here is a sample from my current active project where I am attempting this task:
                                            .do(x => this.bvActivity = x)
                                            .do(x => ValidationEngine.resetGroup())

                                    Do you have any suggestions for either of these questions? I can provide more information, if neccessary.

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Wesley,

                                Angular does not pass a new component variable value to our components at the moment you change the variable. It does this afterwards on the next change detection round trip. I'm not sure if there is an event raised after Angular has passed a new value to a widget and  where you can call the ValidationEngine.resetGroup method to reset validation especially if observables are used. So, I suggest you use a Custom validation rule. You can add a variable to your component that will be a flag that indicates if your custom rule should validate a value or return true, i.e. a value is valid. See the plunk that illustrates this approach.

                                Show all comments
                                • Wesley Valure Jr. 10.24.2017

                                  Thanks Gosha, it looks like your solution solves the issue, at least in the plunk. I'll adapt it to my project and see how well it turns out.

                                  Thanks again!

                                • Gosha (DevExpress Support) 10.24.2017

                                  You are welcome, Wesley!

                                • Wesley Valure Jr. 10.24.2017

                                  Gosha, after evaluating the answer and attempting to add it to my project, I've hit another roadblock. The answer provided works great for 1 field, but not for multiple fields.

                                  In my project, not only are there multiple fields to be validated, but they're not always shown on the screen to be validated. I attempted to use an array of booleans to keep track of which fields were already checked so that I could set this.needValidate to true on the last validation check, but I can't seem to figure out a consistent way to determine the last validation to trigger the flag.

                                  Do you have any ideas on how to approach this issue?

                                  I have modified the original plunk to demonstrate. Use the swap button to toggle the filled in person, then toggle again to see that address is invalid. I've also included a field that is hidden when hasPhone is false to demonstrate what I mean by having fields that may not be present after swapping that I couldn't count on to be validated when figuring out which is the last one to turn on validation again.

                                • Gosha (DevExpress Support) 10.25.2017

                                  Hi Wesley,

                                  I don't see the modified plunk. You need to fork my plunk to make changes to it and then save the changes. Would you please fork my plunk, modify it to illustrate your scenario, save it, and provide me with its URL?

                                • Wesley Valure Jr. 10.25.2017

                                  I apologize, Gosha, I actually did fork and make changes, but forgot to put the address in.
                                  Here's the link to the new version:

                                • Gosha (DevExpress Support) 10.25.2017

                                  Thank you for your sample, Wesley. The simplest solution here is to add a separate flag that indicates that it's necessary to validate an editor value for each editor. But, if you have a lot of them, you will have a lot of such flags. Another solution is to use an rxjs Subject object. You can emit its next event in your validationCallback functions. To catch when the last validation occurs, handle the component ngDoCheck event. In the event handler, check if the needValidate variable is false. If so, use the Subject debounceTime function to postpone firing the Subject subscription callback function. In this callback function, set the needValidate variable to true. See the plunk that illustrates this approach.

                                • Wesley Valure Jr. 10.25.2017

                                  Thanks for the response, Gosha. The new solution was satisfactory and we'll run with it until the timing starts to miss. It's unfortunate that we have to guess at how long validation might take for a single item (minimum debounce time).

                                • Gosha (DevExpress Support) 10.26.2017

                                  You are welcome, Wesley! Usually, validation on the client-side does not take much time. So, I think the debounce time should not be large.