Проверка динамической коллекции Asp .Net Core

Question

Как я могу сделать проверку, особенно на стороне клиента, для динамической коллекции на моей основной модели?

[Table(name: "hArtigos")]
public class Artigo
{
    public Artigo()
    {
        EstadoArtigoId = 1;
    }

    public int Id { get; set; }

    [StringLength(100)]
    [MaxLength(100)]
    [Display(Name = "Motivo Criação")]
    public string MotivoCriacao { get; set; }

    public virtual ICollection<Componente> Componentes { get; set; }
}


[Table(name: "hComponentes")]
public class Componente
{
    public int Id { get; set; }

    [Required]
    [StringLength(50)]
    [MaxLength(50)]
    public string Nome { get; set; }

    [Required]
    [StringLength(50)]
    [MaxLength(50)]
    public string Base { get; set; }

    [Required]
    public double Comprimento { get; set; }
}

здесь я делаю привязку и у меня есть контейнер для генерации динамических входных данных

  <div class="row">
                    <div class="col-md-4">
                        <label asp-for="ArtigoViewModel.NumComponentes" class="control-label required"></label>
                        <input id="txtNumComponentes" asp-for="ArtigoViewModel.NumComponentes" class="form-control" />
                        <span asp-validation-for="ArtigoViewModel.NumComponentes" class="text-danger"></span>
                        <div id="componentesContainer">

                        </div>

                    </div>
                </div>   

Вся магия происходит здесь для рендеринга контента на основе введенного числа

  $('#txtNumComponentes').keyup(function () {

                var numComponentes = $('#txtNumComponentes').val();
                var table = '';

                if (numComponentes || numComponentes > 0) {
                    table = '<table class="table">';
                    table += '<thead class="thead-dark">';
                    table += '<tr>';
                    table += '<th>Componente</th>';
                    table += '<th>Base</th>';
                    table += '<th>Comprimento</th>';
                    table += '</tr>';
                    table += '<tbody>';

                    for (var i = 0; i < numComponentes; i++) {

                        table += '<tr>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Nome" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Nome" class="text-danger"></span></td>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Base" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Base" class="text-danger"></span> </td>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Comprimento" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Comprimento" class="text-danger"></span></td>';
                        table += '<tr>';

                    }

                    table += '</tbody>';
                    table += '</table>';
                }

                $('#componentesContainer').html(table);
            });

Однако диапазоны проверки или атрибуты проверки данных не работают. Единственное, что заслуживает внимания, - это обязательный атрибут html 5, но он не отображает никаких сообщений, кроме автофокусировки.

Есть ли способ справиться с этим?