How to enable/disable the submit button based on the validation in WPF application?

Question

I am in the process of learning WPF. So..I am trying to create a small WPF app using MVVM design pattern. I was able to create the data validation process and displaying the errors on the screen accordingly. However, I need to disable the submit button until after the form is loaded and everything is validated. Additionally, I don't want the request to be processed on form load so by default the errors don't show up.

Here is what I have done. I first created a class called ErrorObserver which handles the errors. I then created a class called ViewModel which extends the ErrorObserver class. I have these 2 classes separated just because I am going to be adding shared view-specific code in the ViewModel. Finally, I have view-specific code for each view-model. For the sake of simplicity, I am sharing a small view called VendorViewModel which extends ViewModel.

Problem The action button is always disabled even when the form has not errors. I want the button state to change as the IsValidated property change. I am using ICommand so I am expecting the button to change as the CanExecute method changes.

Question How do I enable/disable the button based on the value of the IsValidated property?

If you see room for improvment in my code I would appreciate your guidance so I am learning WPF with MVVM the best way possible.

My ObservableObject class is very simple and looks like this

    /// 
    /// An object that supports change notification.
    /// 
    public class ObservableObject : INotifyPropertyChanged
    {
        /// 
        /// Raised when the value of a property has changed.
        /// 
        public event PropertyChangedEventHandler PropertyChanged;

        /// 
        /// Raises  for the property whose name matches .
        /// 
        /// Optional. The name of the property whose value has changed.
        protected void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
        {        
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

The ErrorObserver class look like this

public class ErrorObserver : ObservableObject, INotifyDataErrorInfo
{
    private Dictionary> _errors = new Dictionary>();
    private bool ValidationTriggred = false;

    protected bool IsValidationTriggred
    {
        get
        {
            return ValidationTriggred;
        }
    }

    public event EventHandler ErrorsChanged;

    /// 
    /// Get any errors associated with the giving property name
    /// 
    /// 
    /// 
    public IEnumerable GetErrors(string propertyName)
    {
        if (propertyName != null)
        {
            var messages = new List();

            _errors.TryGetValue(propertyName, out messages);

            if (messages.Any())
            {
                return messages;
            }
        }

        return null;
    }
    /// 
    /// Check if the model has any errors
    /// 
    public bool HasErrors
    {
        get
        {
            return _errors.Any();
        }
    }

    /// 
    /// Validates the property
    /// 
    /// 
    /// 
    protected void Validate(object sender, PropertyChangedEventArgs e)
    {
        // At this point we know that the property changed
        ValidationTriggred = true;

        var context = new ValidationContext(this)
        {
            MemberName = e.PropertyName
        };

        RemoveError(e.PropertyName);

        var results = new Collection();
        bool isValid = Validator.TryValidateObject(this, context, results, true);

        if (isValid)
        {
            return;
        }

        List errors = results.Where(x => x.MemberNames.Contains(e.PropertyName))
                                            .Select(x => x.ErrorMessage)
                                            .ToList();
        if (errors.Any())
        {
            AddError(e.PropertyName, errors);
        }
    }

    /// 
    /// Add the error messages to the errors colelction
    /// 
    /// The property name
    /// The errors messages
    private void AddError(string propertyName, List errorMessages)
    {
        _errors[propertyName] = errorMessages;
    }

    /// 
    /// Remove the error message from the error collections.
    /// 
    /// The property name
    private void RemoveError(string propertyName)
    {
        if (_errors.ContainsKey(propertyName))
        {
            _errors.Remove(propertyName);
        }
    }
}

Here is my ViewModel

public abstract class ViewModel : ErrorObserver
{
    public virtual bool IsValidated
    {
        get
        {
            return IsValidationTriggred && !HasErrors;
        }

    }

    public ViewModel()
    {
        PropertyChanged += Validate;
    }

    protected ICommand Fire(Action

Ivan Semenenia · Accepted Answer

Seems like the problem is that VM property IsValidated, that is binded to your button IsEnabled property, does not properly notify the view that it has been updated. So, the view has no idea that IsValidated value changed, thus button state does not change. You can easily see that using a debbuger and adding a breakpoing at IsValidated getter.

To fix this, you either bind to a property that notify the view about the changes (like Name and Phone props). Another way that was already suggested, is to use Command that has CanExecute action to evaluate. This way all you may need is to force RaiseCanExecuteChange. Here is complete code sample for you.

 /// 
/// Class for binding commands
/// 
public class RelayCommand : ICommand
{
    /// 
    /// The delegate for execution logic.
    /// 
    private readonly Action

How to enable/disable the submit button based on the validation in WPF application?

Answers (2)

Related Questions