Custom Textbox

[Sarah]

Hi,

I read the website documents but unfortunately I could not find the answer to this question. In the following property:

[DisplayName("my display")]

[MaxLength(50)]

[MinLength(3, ErrorMessage = "error min length...")]

[RegularExpression(@"my pattern $",ErrorMessage = " error pattern.")]

public string myProperty { get; set; }="default value";

​

I want to make a custom textbox that has the following features. Thank you for your help.

>>Placeholder : Get value from DisplayName attribute

>>Default value: get data from default value property

>>MaxLength : get from maxlength attribute

>>MinLength : Check that MinLength is observed and display an error if the MinLength is not observed

>>Regex : Check that regular expression is observed and display an error if the pattern is not observed

[Deepak Ramakrishnan]

Hi Sarah, 

 

Greetings from Syncfusion support. 

 

We have created the sample with all your requirements listed , Kindly check the below code and sample   and let us know whether it meets your expectation. 

 

<EditForm Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit"> 

                <DataAnnotationsValidator /> 

                <div class="form-group"> 

                    <div> 

                        <label for="Name" class="textbox-label">Name</label> 

                        <SfTextBox @bind-Value="@annotation.myProperty" HtmlAttributes="@attributes" Placeholder="My display"></SfTextBox> 

                        <ValidationMessage For="@(() => annotation.myProperty)" /> 

                    </div> 

                </div> 

                <div class="sfButton"> 

                    <SfButton type="submit" IsPrimary="true">Submit</SfButton> 

                </div> 

            </EditForm> 

 

@code { 

 

 

    //you can also set html attributes like max-length , class , name etc using HtmlAttributes property 

    Dictionary<string, object> attributes = new Dictionary<string, object>() 

    { 

        {"maxlength" , "10" } 

    }; 

    private string Message = string.Empty; 

    private Annotation annotation = new Annotation(); 

     

    public class Annotation 

    { 

        [Display(Name = "my display")] 

        [Required(ErrorMessage = "The Name field is required.")] 

        [MaxLength(10, ErrorMessage = "The Name field should not contain more than 10 characters.")] 

        [MinLength(3, ErrorMessage = "The Name field must contain at least 3 characters.")] 

        [RegularExpression("^[ A-Za-z]+$", ErrorMessage = "Only alphabets and spaces are allowed")] 

        public string myProperty { get; set; } = "default value"; 

    } 

} 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1286902886.zip 

 

Also you can refer the below demo for your reference . 

 

Demo Link : https://blazor.syncfusion.com/demos/textbox/forms-validation?theme=bootstrap5   

 

Thanks, 

Deepak R. 

 

 

 

 

 

[Sarah]

Hi Deepak Ramakrishnan,

Thank you very much for your answer, as I said I want to create a custom component. Receive property at the input and make the necessary settings based on the attributes I mentioned.

Another thing is that I want to set the attribute using resource files for things like multiple languages ​​and using the code you mentioned will be difficult.

thank you

[Deepak Ramakrishnan]

Hi Sarah, 

 

Thanks for the update. 

 

Before proceeding in our end we need some additional information about your requirement  

 

1. If you are using localization in your application, If yes then kindly provide the details about which attributes are need to be changed while changing the culture. 

2.If the annotation attributes (Display, required) need to be set in parent razor page 

3.Also a simple sample or modify the provided one  which explains use case or the requirement details  

 

 

Thanks, 

Deepak R. 

[Sarah]

Hi Deepak Ramakrishnan,

Thank you for your time. I tend to have a multilingual feature. I'm learning Blazer and have not implemented the multilingual case. But to provide a multilingual introduction, I set all the attribute messages using the resource files. The attributes I used include the following:

Attributes: Display,StringLength,RegularExpression

[Display(Name = nameof(myres.Title), ResourceType = typeof(myres))]

[StringLength(15, MinimumLength = 8, ErrorMessageResourceType = typeof(myres), ErrorMessageResourceName = nameof( myres .Error1))]

[RegularExpression("regext", ErrorMessageResourceType = typeof(myres), ErrorMessageResourceName = nameof( myres .Error2))]

public string Title { get; set; }

Thank you

[Deepak Ramakrishnan]

Hi Sarah, 

 

We will further validate and update the details in two business days(28^th,December 2021). 

 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Sarah, 

 

Thanks for your patience. 

 

Based on further case study , Dynamically assigning values to the attributes is not possible in default validation functionality. We can only set static values to the attributes, For that we need to use custom validation . You can refer the following links for reference. 

 

1. https://stackoverflow.com/questions/2334293/dynamic-range-validation-in-asp-net-mvc-2  

2. https://stackoverflow.com/questions/22256925/range-attribute-using-dynamic-values-instead-of-fixed  

3. https://stackoverflow.com/questions/42449369/how-can-i-used-datetime-today-as-a-paramter-in-dataannotations-rangeattribute  

 

 

Thanks, 

Deepak R. 

[Sarah]

Hi  Deepak Ramakrishnan,

Is value allocation using resource files considered dynamic?

The reason for this question is that the my resource file values ​​do not change during software execution.

Thank you

[Ponmani Murugaiyan]

Hi Sarah, 

Thanks for your update. 

Here we are trying to convey that the attributes value must be static i.e. we can only assign direct values to it , We could not pass a variable consist of respective attribute’s value whether it can changed dynamically or not. So as mentioned earlier, you can refer the links provided for your clearance. 

Regards, 

Ponmani M