Hello Igor,
Currently our editors do not provide the capability to specify their mask. However, it is possible to bind the editor to a property with a regular expression defined. For example, if you have the following model:
[C#] public class ExampleModel
{
[Required]
[RegularExpression("^(?!0+$)(\\+\\d{1,3}[- ]?)?(?!0+$)\\d{10,15}$", ErrorMessage = "Please enter valid phone no.")]
public string Name { get; set; }
}Bind the TextBox in the following manner:
<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<DxTextBox @bind-Text="@exampleModel.Name" CssClass="my-textbox"></DxTextBox>
<button type="submit">Submit</button>
</EditForm>
I've attached a sample project so you can test how it works.
Null Text is also not supported yet, but you can use the workaround suggested in the Blazor - How to make the grid responsive and how to set a Null Text / placeholder for DxTextBox ticket. This workaround is also included in the attached project.
Let me know if you have additional questions.
-
Hi Paul,
Did you consider using this solution: https://github.com/estelle/input-masking ?I would like to continue using DX controls for form input, but lack of masking and placeholders is quite a serious drawback.
It would also be nice to have an option to display validation errors next to the field in question, rather than all together at the top or bottom of the form.
I can achieve all of this with raw <input> fields, but obviously would rather stick with DX.
Also, I notice that using DX form layout elements introduces huge amount of white space, and very significantly impairs information density. With just a handful of fields I end up scrolling the page up and down. Could this amount of whitespace (margins, padding) be controlled?
Hello Igor,
Did you consider using this solution: https://github.com/estelle/input-masking ?
We are not aware of this solution, and we would like to create our own input masking mechanism.
It would also be nice to have an option to display validation errors next to the field in question, rather than all together at the top or bottom of the form.
In this case, use the ValidationMessage component instead of ValidationSummary:
<DxTextBox @bind-Text="@exampleModel.Name" CssClass="my-textbox"></DxTextBox> <ValidationMessage For="@(() => exampleModel.Name)"></ValidationMessage>Also, I notice that using DX form layout elements introduces huge amount of white space, and very significantly impairs information density. With just a handful of fields I end up scrolling the page up and down. Could this amount of whitespace (margins, padding) be controlled?
You can customize a component's style by writing custom CSS rules. See the How to implement CSS-related solutions for DevExpress components article. If you have any questions regarding this, I would suggest creating a separate ticket to make the entire conversation easier to follow.