如何清除Angular反应形式输入值

Question

我有一个简单的反应式表格，像这样

constructor(private scheduleService: ScheduleService, fb: FormBuilder) {
this.searchForm = fb.group({
  from: ["", Validators.required],
  to: ["", Validators.required],
  date: ["", Validators.required]
});
}

我想通过单击调用清除功能的按钮来清除表单字段。我的清除功能目前无法正常运行，看起来像这样

clear() {
console.log("Reset all search form fields to null.");

this.searchForm.from = "";
this.searchForm.to = "";
this.searchForm.date = "";
}

使用角反应式表单时清除表单输入字段的正确方法是什么？如何通过使用一条语句来重置所有表单字段而不是单个字段来实现此目的？

Answer 1

Angular开箱即用提供reset() method。在发表您的问题之前，请先进行研究。

Answer 2

  ngOnInit(): void {
    this.searchForm = this.fb.group({
      from: ['', Validators.required],
      to: ['', Validators.required],
      date: ['', Validators.required]
    });
  }

重置完整表格

  resetForm() {
    this.searchForm.reset();
  }

重置单个字段

  resetFrom() {
    this.searchForm.get('from').reset();
  }