如何在Angular 2中访问表单别名以重置表单？

Question

在Angular2中，我在bootstrap4对话框中有一个带有<form>的模板。表单包含输入元素：

<div id="mymodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
...
   <form #heroForm="ngForm">
      <input ...>
   </form>
</div>

请注意，表单会获取别名heroform。

由于输入元素使用验证，我想在模态隐藏时调用heroForm.reset()清除所有输入和验证状态。

因此在组件中，我连接到这个模态事件：

$('#mymodal').on('hide.bs.modal', function (e: any) {
   heroForm.reset(); <-- how to get this heroForm "instance"
});

但是如何从那里访问heroForm？