重置Angular模板形式会导致select元素错误

Question

HTML

<form (ngSubmit)="addCoreTeam(coreteam)" #coreteam="ngForm">
 <select class="custom-select form-control" ngModel name="role">
  <option *ngFor="let role of role" value="{{role}}">
    {{role}}
  </option>
 </select>

 <div class="col-md-6 col-lg-3">
   <button type="reset" class=" btn btn-block btn-danger" (click)="reset(coreteam)">Reset</button>
 </div>
</form

控制器

role = ["Manager", "Board member", "Sleeping Partner", "Investor", "Director", "CEO", "Founder", "Business Advisor", "IP", "Legal", "Accounting Advisor"];


reset(coreteam: NgForm) {
if (confirm("Do you want to reset the form?")) {
  coreteam.reset(
    this.user = {
      firstName: "",
      lastName: "",
      age: undefined,
      sharePercent: 0,
      role: "",
      moreRoles: [],
      team: [],
      managementExp: undefined,
      industryExp: undefined,
      entrepreneurialExp: undefined,
      qualification: [],
      timeCommitment: undefined,
      joinDate: "",
      leaveDate: ""
    }
  );

} else {
  return false;
}

This is the select element when the form loads, initially

This is the select element after I reset the form

我的复选框看起来像页面加载时的第一张图像。我可以选择值，并且可以正常提交表单。 如果我通过单击重置按钮来重置表单，则会出现问题。表单将重置，然后该复选框看起来像第二个图像，其中显示“ Manager”作为默认选项。当我以“经理”作为所选值提交表单时，它还会传递null作为Role的值。

这里是另一个提示，当选择并提交“经理”以外的其他角色时，该值将正常更改。 This is the correct value submitted after resetting the form, and choosing a value other than 'Manager'

Here are both logs next to each other

感谢您的帮助。