angular form，不工作重置方法不工作

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <input type="text" name="username" ngModel>
  <button type="button" (click)="myForm.reset()">Reset</button>
</form>

export class MyComponent {
  onSubmit(value: any) {
    console.log(value);
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
  <input type="text" formControlName="username">
  <button type="button" (click)="myForm.reset()">Reset</button>
</form>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      username: ['']
    });
  }

  onSubmit(value: any) {
    console.log(value);
  }
}