Custom control with email validator doesn't change border

[eduardoagr]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

I have a custom control, that shows the textbox with a border and an hint

Expected Behavior

I want to change the border color, when the email is not valid, and change the border color to green

Steps To Reproduce

1. Open the Solution
2. input a bad email address (It doesn't change color)

Link to public reproduction project repository

https://github.com/eduardoagr/CustomEntry

Environment

- .NET MAUI CommunityToolkit:
- OS: Edition	Windows 11 Education Version 23H2
- .NET MAUI: 8.0.21

Anything else?

No response

[TheCodeTraveler]

It looks like this is a question on how you can update your app to correctly use EmailValidaitonBehavior with your custom entry.

Your attached sample has a few problems:

1. It crashes on startup:

System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
 ---> System.TypeInitializationException: The type initializer for 'CustomEntry.Controls.CustomEntry' threw an exception.

2. You are attaching the EmailValidationBehavior to controls:CustomEntry whose text never changes because the Entry in your XAML does not have a Binding to ViewModel.Entry

I am converting this to a discussion because I don't see a bug here with EmailValidaitonBehavior, rather an incorrect implementation.

[eduardoagr]

But I do not understand, the text of the customControl is bind to the Email of the vm

[eduardoagr]

<controls:CustomEntry CornerRadius="10" Hint="email" Text="{Binding Email}">

[TheCodeTraveler]

You need to bind your Entry to your ViewModel. Currently, the text input to the Entry never changes the value of ViewModel.Email, and subsequently CustomEntry.Text never updates.

Current Implementation

<Entry Text="dewdwe" />

Recommended Implementation

<Entry Text="{Binding Email}" />

[eduardoagr]

don't pay attention to that entry, I am talking about the customEntry

`<controls:CustomEntry
CornerRadius="10"
Hint="email"
Text="{Binding Email}">

public partial class MainViewModel : BaseViewModel {
[ObservableProperty]
string email;

}`

[pictos]

@brminnick, I took the liberty to mark this an unanswered because I checked what @eduardoagr mentioned and it looks like something is off. I don't see it as a bug, but an enhancement that we can do.

When you start the application, the border will be green (valid state) and shouldn't since there's nothing there (Text == null or empty), and the reason for that is the IsValid is initialized as true. From my PoV the easiest solution would be to have the IsValid as bool? and initialize it with null, and just change its value to true or false when something triggers the validation.

As you can see in the image below:

expected behavior:

Let me know what you think about it

[eduardoagr]

Thanks but I still have the error of the green border when the app start

[pictos]

yeap. as I mentioned, the code that fixes it is inside MCT. I don't see that as bug, but a design decision, where we've two states, Valid and Invalid, your scenario shows up that maybe need to handle the default state

[pictos]

@eduardoagr I did find a workaround that you can use... Is just a matter of implementing a converter, here's your sample updated with the solution

workaround_validate_state.zip

[eduardoagr]

we can implement this control to the mct, what do you think, I know is a very simple and stupid control, but it could be useful to someone

[eduardoagr]

why the order is not visible at the start, it should be visible. Also in your code, I don't know why the label is in the top line, if the ZInex is 1, it should be in front