I have a blazor Server Size Application where I have an Editform within an Editform. It looks like this:
<EditForm Model=@newPerson Context="PersonForm" OnValidSubmit="@FormSubmitted">
<ValidationSummary />
<div class="form-row">
<h4>Staff Information</h4>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="ResourceId">Person Id</label>
<InputText @bind-Value=newPerson.ResourceId class="form-control" id="ResourceId" />
</div>
<div class="form-group col-md-2">
<label for="Title">Title</label>
<InputText @bind-Value=newPerson.Title class="form-control" id="Title" />
</div>
<div class="form-group col-md-2">
<label for="Forename">Forename</label>
<InputText @bind-Value=newPerson.Forename class="form-control" id="Forename" />
</div>
<div class="form-group col-md-2">
<label for="Surname">Surname</label>
<InputText @bind-Value=newPerson.Surname class="form-control" id="Surname" readonly />
</div>
</div>
<EditForm Model=@newPos OnValidSubmit="@AddPosition">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-row">
<h4>Position</h4>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="newPositionId">Position Id</label>
<InputText @bind-Value=newPos.PositionId class="form-control" id="newPositionId" />
</div>
<div class="form-group col-md-2">
<label for="newPositionName">Position Name</label>
<InputText @bind-Value=newPos.PositionName class="form-control" id="newPositionName" />
</div>
</div>
<input type="submit" class="btn btn-primary" value="Add Additional Position" />
</EditForm>
<br />
<input type="submit" class="btn btn-primary form-group mr-1" value="Save Person" />
<hr />
</EditForm>
The Models for these forms are:
public class Person
{
[Required]
public string ResourceId { get; set; }
[Required]
public string Title { get; set; }
[Required]
public string Forename { get; set; }
[Required]
public string Surname { get; set; }
public List<Position> Positions { get; set; }
}
public class Position
{
[Required]
public string PositionId { get; set; }
[Required]
public string PositionName { get; set; }
}
the submit methods these forms call are:
void AddPosition(EditContext editContext)
{
bool formIsValid = editContext.Validate();
if (formIsValid == true)
{
newPerson.Positions.Add(newPos);
newPos = new Position();
//JsRuntime.InvokeVoidAsync("alert", "Position added. Click submit to add another.");
}
}
void FormSubmitted(EditContext editContext)
{
bool formIsValid = editContext.Validate();
if (formIsValid == true)
{
newHr.Positions.Add(newPos);
OnInitializedAsync();
}
}
This allows me to add multiple positions to the person record, and when doing this the form will validate correctly, however when saving the top level form (person), it will validate person correctly, but ignore the validation on the subform (position). This is then allowing me to add invalid data to the person record when submitting the form as position has empty data contained within.
Is it possible to validate the sub editform when submitting the main editform using the FormSubmitted Method?
I’ve tried adding various validation to the models and [required] tags to the position within the person model but this didnt work. I’ve also tried adjusting the child context on the editforms. I tried getting the AddPosition form to pass out its validation to the main form but could not get this to work at all. I looked at using external validation nuget packages but i would ideally like to get this done with native blazor if at all possible.