Required message is displayed even if the field is provided C# - asp.net-core

Question

Using ASP.Net Core, I am developing a simple form to reset the password using email address.
My model is as follow:
public class EmailViewModel
{
[Required(ErrorMessageResourceName = "Model_RequireEmail", ErrorMessageResourceType = typeof(Resources.Identity))]
[Display(Name = "Models_Account_Email", ResourceType = typeof(Resources.Identity))]
[DataType(DataType.EmailAddress)]
[EmailAddress(ErrorMessage = "Models.EmailFormat")]
[MaxLength(100, ErrorMessage = "Models.MaxLength")]
public string? Email { get; set; }
}
And my view:
<form method="post">
<div class="uk-text-danger">
#Html.ValidationSummary()
</div>
<div class="uk-margin">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: mail"></span>
#Html.TextBoxFor(m => m.Data.EmailViewModel.Email, new
{
#class = "validate uk-input",
placeholder = Html.DisplayNameFor(m => m.Data.EmailViewModel.Email)
})
#Html.HiddenFor(m => m.Data.ResetPasswordAction)
#Html.HiddenFor(m => m.Data.ResetPasswordController)
</div>
</div>
<button class="uk-button uk-button-default">#Html.LocalizedIdentity("Views.Account.PassReset")</button>
</form>
My issue is that even if I provide a correct email address, I keep getting the message of the "required" data annotation. What did I miss?
EDIT 13/12/2021
The issue occurs when I used a nested ViewModel. For example, the viewModel associated with my form is
public class ForgotPasswordViewModel
{
public EmailViewModel EmailViewModel => new EmailViewModel();
[HiddenInput]
public string? ResetPasswordAction { get; set; }
[HiddenInput]
public string? ResetPasswordController { get; set; }
}
using the EmailViewModel above. This give a ModelState.IsValid= false because the email is null even if provided.
If I bypass the EmailViewModel and use for my ForgotPasswordViewMode, the following:
public class ForgotPasswordViewModel
{
[Display(Name = "Models_Account_Email", ResourceType = typeof(Resources.Identity))]
[Required]
[DataType(DataType.EmailAddress)]
[EmailAddress(ErrorMessage = "Models.EmailFormat")]
[MaxLength(100, ErrorMessage = "Models.MaxLength")]
public string? Email { get; set; }
[HiddenInput]
public string? ResetPasswordAction { get; set; }
[HiddenInput]
public string? ResetPasswordController { get; set; }
}
It works nicely.
The problem is that I want to use the nested ViewModel to avoid repeating it.
Why doesn't it work with the nested EmailViewModel?

Answer 1

This is my model and my test view, it will lead to ModelState.IsValid == false because the input form should have a property of emailVM.Email but not EmailViewModel.
public class EmailViewModel
{
//[Required(ErrorMessageResourceName = "Model_RequireEmail", ErrorMessageResourceType = typeof(Resources.Identity))]
//[Display(Name = "Models_Account_Email", ResourceType = typeof(Resources.Identity))]
[Display(Name = "Models_Account_Email")]
[Required]
[DataType(DataType.EmailAddress)]
[EmailAddress(ErrorMessage = "Models.EmailFormat")]
[MaxLength(100, ErrorMessage = "Models.MaxLength")]
public string? Email { get; set; }
}
public class ForgotPasswordViewModel
{
//public EmailViewModel emailVM => new EmailViewModel();
public EmailViewModel emailVM { get; set; }
[HiddenInput]
public string? ResetPasswordAction { get; set; }
[HiddenInput]
public string? ResetPasswordController { get; set; }
}
<form method="POST" asp-action="Edit">
<div class="uk-text-danger">
#Html.ValidationSummary()
</div>
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: mail"></span>
#Html.TextBoxFor(m => m.emailVM.Email, new
{
placeholder = Html.DisplayNameFor(m => m.emailVM.Email)
})
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>