Search code examples
c#blazormudblazor

HelperText attibute does not support complex content (mixed C# and markup)

I just want my component to have some HelperText saying Please provide a valid @outlook.com email. But it's picking up on the @ symbol and causing errors. How can I tell it to process it as a character in the string?

<MudTextField @bind-Text="Email" T="string" MaxLength="250" 
  Class="mt-2" Label="E-Mail*" 
  HelperText="Please provide a valid @outlook.com email" 
  HelperTextOnFocus="true" Margin="Margin.Dense" Variant="Variant.Outlined" />
Solution

  • You have at least three options that I can think of off the top of my head.

    1. Use an expression containing the literal string

    HelperText="@("Please provide a valid @outlook.com email")"

    2. Bind to a local property

    <MudTextField 
  HelperText="@EmailHelperText"  />

@code {
  private string EmailHelperText { get; } 
    = "Please provide a valid @outlook.com email";
}

    3. Replace the @ with the HTML entity &#64;

    HelperText="Please provide a valid &#64;outlook.com email"

    Demo: https://try.mudblazor.com/snippet/QYQSYvuTnXcvoquF

    (Press the green play icon in the top left of the demo to view)