Angular 重置反应性角度形状的最有效方法是什么？

我使用的输入（

mdInput

）是使用

FormBuilder

以以下方式初始化的：

contactForm: FormGroup;

this.contactForm = this.fb.group({
  name: ['', [Validators.required, Validators.maxLength(128)]],
  email: ['', [Validators.required, Validators.email]],
  subject: ['', [Validators.required, Validators.maxLength(128)]],
  message: ['', [Validators.required, Validators.maxLength(1000)]]
});

onSubmit(): void {
  this.resetForm();
}

private resetForm(): void {
  this.contactForm.reset();
}    

与各个FormControl元素相关联的角度材质输入，挂钩到

（ngSubmit）

：

提交

在

FormGroup

contactForm

上调用

reset（）

时（this.contactForm.reset（）

，表单元素值被成功地清除/替换为空字符串，但元素都立即变脏并被CSS类触及

ng无效的

&

ng被触及的

。奇怪的是，在

reset（）之后，元素上也有ng pristine

CSS类

重置表单的最有效方法是什么，包括清除/重置
FormControl
值并将其标记为未接触且未弄脏？是使用
markAsUntouched（）
还是
markAsPristine（）
？是使用
setValue（）
还是
reset（））
使用特定选项？目标是重置表单，就像用户第一次与表单交互一样

更新：下面是一个示例，显示了此问题的实际情况

感谢您提供的任何帮助。
正如@Harry Ninh在评论中提到的，使用常规按钮而不是
ngSubmit
将修复该行为。这是因为，默认情况下，当输入
无效
，或者
触摸
或者
提交
时，会显示重大错误。关于基本上，对表单控件或表单组调用
reset（）
不会重置实际表单，只重置值

您可以执行以下操作之一：

使用@Harry Ninh提到的解决方法
使用
ViewChild
访问并重置
请看这里：

@ViewChild(FormGroupDirective) myForm;

contactForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.createForm();
}

private createForm(): void {
  this.contactForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(128)]],
    email: ['', [Validators.required, Validators.email]],
    subject: ['', [Validators.required, Validators.maxLength(128)]],
    message: ['', [Validators.required, Validators.maxLength(1000)]]
  });
}

onSubmit(): void {
  this.resetForm();
}

private resetForm(): void {
  if (this.myForm) {
    this.myForm.resetForm();
  }
}

不应该是这样。根据源代码，
reset
会将表单标记为未触及的原始表单。请参阅，我已更新了答案，以包含一个来演示实际问题。您会注意到onSubmit调用reset（），导致所有具有
验证器的输入都被触摸和弄脏。谢谢！使用
ngSubmit
会以某种方式中断流程。我可以看到所有输入都未被触摸，但仍会显示错误。如果您将提交按钮更改为类似

@ViewChild(FormGroupDirective) myForm;

contactForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.createForm();
}

private createForm(): void {
  this.contactForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(128)]],
    email: ['', [Validators.required, Validators.email]],
    subject: ['', [Validators.required, Validators.maxLength(128)]],
    message: ['', [Validators.required, Validators.maxLength(1000)]]
  });
}

onSubmit(): void {
  this.resetForm();
}

private resetForm(): void {
  if (this.myForm) {
    this.myForm.resetForm();
  }
}