Сброс FormGroup со значением arg правильно сбрасывает FormGroup, но очищает ввод HTML, связанный с FormControls

Question

У меня есть форма, использующая angular 7. У меня проблема с моей FormGroup, и входные данные HTML, связанные с FormControls этой FormGroup, перестали синхронизироваться после сброса. Мои входные данные очищены, но мои элементы управления формой имеют ожидаемые значения сброса.

Я могу заставить их оставаться в синхронизации, используя кнопку сброса, которая не относится к типу «сброс», но связывает событие onclick. Кроме того, я могу заставить работать семантически правильную кнопку сброса, проглотив событие и продолжив сброс формы.

Однако, это кажется мне семантически неверным. Не говоря уже о том, что рабочая версия кода, которую я хочу использовать, гораздо удобнее работает с семантически правильным кодом, при условии, что я могу решить эту проблему синхронизации.

Из соображений простоты и поведения я адаптировал код из документации angular https://angular.io/api/forms/FormControlName

Ниже мой проблемный код

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(): void {
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Ниже приведен мой код, который ведет себя как нужно

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <!--Changed from type="reset" button to button with click event binding-->
      <button (click)="resetToDefault()">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(): void {
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Вот еще одна итерация, которая работает правильно, она ловит событие и останавливает его, прежде чем продолжить мой код сброса.

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault($event)">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  resetToDefault(event): void {
    event.preventDefault();
    event.stopPropagation();
    this.form.reset({first: 'wicca', last: 'woo'});
  }

}

Есть ли "лучший" способ выполнить сброс формы с помощью Angular FormGroup, чем то, что я написал выше?