angular 10表单重置触发验证错误

<form #myForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" name="name" required [(ngModel)]="name">
    <div *ngIf="myForm.controls.name.invalid && myForm.controls.name.touched">
      <small class="text-danger">Name is required.</small>
    </div>
  </div>
  
  <!-- 其他表单控件 -->
  
  <button type="button" (click)="resetForm()">Reset</button>
</form>

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  name: string;
  // 其他表单控件
  
  myForm: FormGroup;
  
  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      // 其他表单控件
    });
  }
  
  resetForm() {
    this.myForm.markAllAsTouched(); // 强制触发验证
    this.myForm.reset(); // 重置表单
  }
}