This is really more of a question of why the provided solution is working to ensure the correct implementation. However, correct implementations are always welcome.
I have a Devextreme Vue form that has a text mask for data fields that require phone numbers with the following configuration (ignore the commented out maskRules field.)
{
...
mask:"(000) 000-0000",
maskInvalidMessage:"Parent/Guardian phone number is not valid",
...
}
and a dx-form-simpleitem (imported as FormItem) that utilizes the object with the specified configuration above:
<form-item data-field="..."
editor-type="dxTextBox"
:editor-options="phoneOptions"
css-class="no-pading"
>
<dx-label text="Parent/Guardian Phone"></dx-label>
<dx-required-rule message="Parent/guardian phone number is required"></dx-required-rule>
</form-item>
What surprised me is that when I call my dxForm instance's validate() method from an external submission button (not a dxButton as part of the dxForm's import compnent list if this matters), the validation error from the format specified in the mask configuration above actually gets attached as part of the rules that the form's validation needs to check against without the need to specify a dxPatternRule on the form-item component above. View the attached image of the console log pertaining to this particular matter and notice how the error message lines up with the validation message defined in the mask configuration object.
So my question is this, how exactly does this validation logic get attached to the respective dxForm's validation group and is there a better alternative to this that needs to be considered? Thanks.