@inject CoursePlanner planner
@inject CanvasService canvas

@code {

  [Required]
  [StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
  private string Name { get; set; } = "";

  [Parameter]
  public EventCallback OnSubmit { get; set; }

  private async Task submitHandler()
  {
    if(planner.Course != null && Name != "")
    {
      await canvas.CreateModule(planner.Course.Id, Name);
      planner.Modules = await canvas.GetModules(planner.Course.Id);
    }
    Name = "";
    await OnSubmit.InvokeAsync();
  }
}

<h1>New Module</h1>

<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
  <label for="moduleName">Name:</label>
  <input id="moduleName" class="form-control" @bind="Name" />
  <button class="btn btn-primary">Save</button>
</form>