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.
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.