Validators and FormFields

Using the new RadzenFormField control with a validator, the red/green box around the field "cuts" the label

We fixed transforming the rectangle in a border-bottom line, but I'm afraid that in future releases the trick doesn't works...

Thanks

<RadzenFormField Text="Number of PAX" Variant="Variant.Text" class="w-100">
                                <ChildContent>
                                    <RadzenNumeric @bind-Value="@EventSubscription.Pax" Name="Pax" class="input-box" />
                                </ChildContent>
                                <Helper>
                                    <RadzenNumericRangeValidator Component="Pax" Min="1" Max="@EventSubscription.MaxPax" Text="Value out of range" Popup="false" />
                                    <small class="helper-info">Max @EventSubscription.MaxPax PAX</small>
                                </Helper>
                            </RadzenFormField>

Hi @SandroRiz,

These red and green rectangles are not part of the Radzen styling. See the FormField Validation example here for reference.

Please share any custom styles to see if we can help and fix the overlapping.

Hi @yordanov,
in the Formfield Validation Demo the code looks like this:

            <RadzenFormField Text="Last Name" Variant="@variant">
                <ChildContent>
                    <RadzenTextBox Name="LastName" @bind-Value=@model.LastName />
                </ChildContent>
                <Helper>
                    <RadzenRequiredValidator Component="LastName" Text="Last name is required." />
                </Helper>
            </RadzenFormField>

I cannot find out how i can create this code with Radzen Studio.
Whatever i do I cannot create the

                <Helper>
                    <RadzenRequiredValidator Component="LastName" Text="Last name is required." />
                </Helper>

Part.
When i define the RequiredValidator as a Help Template


my page look like this>

                <div style="height: 48px" class="row">
                  <div class="col-md-10" style="display: inline-block; float: left">
                    <RadzenFormField style="width: 100%" Text="Strasse" Variant="Variant.Outlined">
                      <ChildContent>
                        <RadzenFormFieldHelp Component="Strasse" style="display: block; position: static" Text="Eingabe erforderlich" Type="required-validator">
                        </RadzenFormFieldHelp>
                      </ChildContent>
                      <ChildContent>
                        <RadzenTextBox style="display: block; float: left; width: 100%" Trim="true" @bind-Value="@(partner.Strasse)" Name="Strasse">
                        </RadzenTextBox>
                      </ChildContent>
                    </RadzenFormField>
                  </div>

What am i doing wrong?

Thanks for help
Thomas

Hi @Thomas,

Radzen doesn't support that yet. We will implement it in one of the next releases.

@korchev,
Great! Thanks!

Thomas

btw... Start and End cannot be defined too.

Thomas