How can I add a dynamic form field to the EditContext for validation in a Blazor server app

Viewed 382

I add a RenderFragment to an EditForm which contains InputSelect and InputNumber fields. It is working but their validations don't. I think I should add then to the EditContext but I do not know how. I tried to look up on the net but they were complicated for me yet. AddBillComponent.razor

<EditForm EditContext="@EditContext" OnSubmit="@HandleSubmit">
  <DataAnnotationsValidator />
    <label for="BillNumber">Bill number:</label>
    <InputText @bind-Value="NewBillHeaderVM.BillNumber" />
    <ValidationMessage For="@(() => NewBillHeaderVM.BillNumber" />
    @foreach(var item in BillItemFragments)
    {
      @item;
    }
    <button type="submit">Save</button>
</EditForm>

AddBillComponent.razor.cs

protected NewBillHeaderVM NewBillHeaderVM { get; set; }
protected EditContext EditContext { get; set; }
protected List<RenderFragment> BillItemFragments{ get; set; }

public async Task ShowDialog() 
{
  NewBillHeaderVM = new NewBillHeaderVM 
  {
    BillItemTypes = TypeService.Get();
    NewBillItemVMs = new List<NewBillItemVM>()
  }
  BillItemFragments = new List<BillItemFragment> {
    CreateDynamicFragment();
  }
  EditContext = new EditContext(NewBillHeaderVM);
  await InokeAsync(StateHasChanged);
}
RenderFrafment CreateDynamicFragment() => builder =>
{
  var newBillItemVM = new NewBillItemVM();
  NewBillHeaderVM.NewBillItemVMs.Add(newBillItemVM);
  builder.OpenComponent(0, typeof(BillItemFragment);
  builder.AddAttribute(1, NewBillHeaderVM.BillItemTypes);
  builder.AddAttribute(2, "NewBillItemVM", newBillItemVM);
  builde.CloseComponent();
}

BillItemFragment.razor

<div>
  <label for="NewBillItemVM.SelectedBillItemTypeId>Type:</label>
  <InputSelect id="NewBillItemVM.SelectedTypeId" @bind-Value="@NewBillItemVM.SelectedBillItemTypeId">
    @foreach(vat opt in BillItemTypes)
    { 
      <option value=@opt.Value>@opt.Text</option>
    }
   </InputSelect>
   <ValidationMessage for="@(() => NewBillItemVM.SelectedBillItemTypeId)" />
   <label for="NewBillItemVM.Number>Number:</label>
   <InputNumber id="NewBillItemVM.Number" @bind-Value="@NewBillItemVM.Number" />
   <ValidationMessage for="@(() => NewBillItemVM.Number)" />
</div>
@code {
  [Parameter]
  public List<BillItemType> BillItemTypes { get; set; }
  [Parameter]
  public NewBillItemVM NewBillItemVM { get; set; }
}

Unfortunatelly I do not know why the field validation does not work on the fields of BillItemFragment only its parent component. Please Thx

0 Answers
Related