In .Net Maui using MVVM - How to enable/disable a button based on value in entry field?

Question

In my project, I've an entry control and a submit button. I want the button to be disabled till at least 3 characters are input in the entry field. Once the the minimum threshold is met, submit button should be enabled.

If the user then deletes characters to less than 3, it should disable the button again. How can I do that in MAUI using communitytoolkit.MVVM?

Here is what I've done so far:

View:

<Entry Placeholder="Enter Name"
       MaxLength="15" />

<Button 
     Command="{Binding SubmitCommand}"
     IsEnabled="{Binding IsNameLengthValid}"
     Text="Submit"
/>

ViewModel:

[ObservableProperty]
string _name = string.Empty;

[ObservableProperty]
bool _isNameLengthValid = false;

[RelayCommand]
private async void NameLength()
{
    if(Name.Length >= 3)
      IsNameLengthValid = true;
    else
      IsNameLengthValid = false;
}

[RelayCommand(CanExecute = nameof(IsNameLengthValid))]
async Task Submit()
{
    await Toast.Make("Form Submitted").Show().ConfigureAwait(false);
}

How can I attach the NameLength() command to the entry control and trigger it on change?

Answer 1

You can use Data triggers to achieve this.

A DataTrigger represents a trigger that applies property values, or performs actions, when the bound data meets a specified condition.

Please refer to the following code

    <Entry x:Name="entry"
           Text=""
           Placeholder="required field" />
    <!-- referenced below in DataTrigger-->
    <Button x:Name="button"
            Text="Save"
            FontSize="20"
            HorizontalOptions="Center">
        <Button.Triggers>

            <DataTrigger TargetType="Button"
                         Binding="{Binding Source={x:Reference entry},
                                           Path=Text.Length}"
                         Value="2">
                <Setter Property="IsEnabled"
                        Value="False" />
            </DataTrigger>
            <DataTrigger TargetType="Button"
                         Binding="{Binding Source={x:Reference entry},
                                           Path=Text.Length}"
                         Value="1">
                <Setter Property="IsEnabled"
                        Value="False" />
            </DataTrigger>
            <DataTrigger TargetType="Button"
                         Binding="{Binding Source={x:Reference entry},
                                           Path=Text.Length}"
                         Value="0">
                <Setter Property="IsEnabled"
                        Value="False" />
            </DataTrigger>
            
        </Button.Triggers>
    </Button>

Answer 2

That can look like this:

View:

<Entry
        MaxLength="15"
        Placeholder="Enter Name"
        Text="{Binding Name}" />
    <Button Command="{Binding SubmitCommand}" Text="Submit" />

ViewModel:

[ObservableProperty]
[NotifyCanExecuteChangedFor(nameof(SubmitCommand))]
string _name = string.Empty;

public bool CanExecuteSubmit => Name.Length >= 3;

[RelayCommand(CanExecute = nameof(CanExecuteSubmit))]
async Task Submit()
{
    //TODO: Submit code here
}