Сброс угловой шаблон формы вызывает ошибку на элементе выбора

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;
}

Это элемент выбора, когда форма загружается, изначально

Это элемент выбора после сброса формы

Мой флажок выглядит как первое изображение при загрузке страницы. Я могу выбрать значения и могу отправить форму как обычно. Проблема возникает, если я сбрасываю форму, нажимая кнопку сброса. Форма сбрасывается, и флажок выглядит как второе изображение, где в качестве выбора по умолчанию отображается «Менеджер». Он также передает значение NULL в качестве значения для роли, когда я отправляю форму с «Менеджером» в качестве выбранного значения.

Вот еще один кикер, значение меняется как обычно, когда выбирается и отправляется другая роль, отличная от «Менеджер». Это правильное значение, представленное после сброса формы и выбора значения, отличного от «Менеджер»

Вот оба бревна рядом друг с другом

Любая помощь приветствуется.