Razor pages binding dropdownlist to complex type database not binding viewmodel

I got a dropdown list that is populated from a database, It renders fine and the items are shown. The issue comes in when i try to save the model and the viewstate says its invalid for the postCategory Title and description as they are null but does have the Id value from the selection.

my db class is as follows.

 public class Article
{
 public long ArticleId { get; set; }
 [Required]
        [MaxLength(200)]
        public string Title { get; set; }
    public ArticleCategories PostCategory { get; set; } //this the problem
}

    public class ArticleCategories
    {
       
        public long Id { get; set; }
       
        [Required]
        [MaxLength(100)]
        public string Title { get; set; }
        [Required]
        [MaxLength(300)]
        public string Description { get; set; }
        public string Slug { get; set; }
        public List<Article> AssociatedPosts { get; set; }
    }

In my page model i load the dropdown list as follows.

        public ArticleCategories NewArticleCategory { get; set; }
        public List<SelectListItem> PostCategories
        {

            get
            {

                List<SelectListItem> NewList = new List<SelectListItem>();

                NewList = _context.ArticleCategories.Select(a =>
                                      new SelectListItem
                                      {
                                          Value = a.Id.ToString(),
                                          Text = a.Title.ToString(),
                                      }).ToList();

                return NewList;

            }

        }

and on the page

                            <div class="form-group">
                    <label asp-for="BlogArticle.PostCategory" class="control-label"></label>
                    <select asp-for="BlogArticle.PostCategory.Id" class="form-control" asp-items="Model.PostCategories">
                            <option value="">--Choose a Catergory--</option>
                        </select>

                        @Html.HiddenFor(m=>m.BlogArticle.PostCategory.Title )
                        
                        @Html.HiddenFor(m=>m.BlogArticle.PostCategory.Description )
                  
                    <span asp-validation-for="BlogArticle.PostCategory" class="text-danger"></span>



                </div>

It only select the Id so tried to attach it by retrieving it from the db.

            var PostCategory = _context.ArticleCategories.Where(c => c.Id == BlogArticle.PostCategory.Id).FirstOrDefault();
            if (PostCategory != null)
            {

                BlogArticle.PostCategory = PostCategory;
            }

            if (!ModelState.IsValid)
            {
                return Page();
            }

not sure where i am going wrong, if there any advice or suggestions it would be greatly apricated. thank you in advance.

From your code, When you pass data to backend from view, the ArticleCategories model will only have Id value from selection, the values of Title and Description are null because you do not pass any value to their input tag right? modelsate will only validate the model passed from the view. Now the ArticleCategories model passed from the view only has id value, you also add [Required] tag to Title and Description properties, So Title and Description will be invalid in modelsate.

In your code, I think you want ModelSate to validate other properties, So you need to remove Title and Description properties from ModelSate, Please refer to this code :

if (ModelState.Remove("BlogArticle.PostCategory.Title") && ModelState.Remove("BlogArticle.PostCategory.Description"))
{
     if(!ModelState.IsValid)
     return Page();
}

    return Page();