How to implement CanExecute in ReactiveCommand

Question

In our Xamarin.Forms application we are using ReactiveProperty framework( https://github.com/runceel/ReactiveProperty).

Please note here we are only using ReactiveProperty and not ReactiveUI.

I have a SignInViewMode class like below..

public class SignInPageViewModel
{
    // Constructor
    public SignInPageViewModel()
    {

    }

    // Reactive Properties
    public ReactiveProperty<string> PhoneNumber { get; set; } = new ReactiveProperty<string>();
    public ReactiveProperty<string> UserName { get; set; } = new ReactiveProperty<string>();
    //Commands
    public ReactiveCommand GoToNextCommand { get; set; } = new ReactiveCommand();
}

GoToNextCommand is binded to a Button in view. I want to implement CanExecute functionality of GoToNextCommand(Disable the GoToNextCommand if any of UserName or PhoneNumber property is null), but I do not know how to achieve this in ReactiveProperty.

Any help is appreciated.

Answer 1

Thank you for using my library.

You can create the ReactiveCommand instance from IObservable<bool> like as below.

GoToNextCommand = Observable.CombineLatest(
    PhoneNumber.Select(x => !string.IsNullOrEmpty(x)),
    UserName.Select(x => !string.IsNullOrEmpty(x)),
    (x, y) => x && y)
    .ToReactiveCommand();

And can use a Validation feature together.

// using System.ComponentModel.DataAnnotations;
[Required]
public ReactiveProperty<string> PhoneNumber { get; }
[Required]
public ReactiveProeprty<string> UserName { get; }  

public ReactiveCommand GoToNextCommand { get; }

public SignInPageViewModel()
{
    PhoneNumber = new ReactiveProperty<string>()
        .SetValidateAttribute(() => PhoneNumber);
    UserName = new ReactiveProperty<string>()
        .SetValidateAttribute(() => UserName);

    GoToNextCommand = Observable.CombineLatest(
        PhoneNumber.ObserveHasErrors.Inverse(),
        UserName.ObserveHasErrors.Inverse(),
        (x, y) => x && y)
        .ToReactiveCommand()
        .WithSubscribe(() => { ... do something ... });
}