Angular Reactive Forms，formName.reset() 工作但抛出错误“control.value is null”并且所有字段都标记为“red”并且无效？

Question

我有一个角度反应形式，提交时我有这个代码：

(ngSubmit)="addVideo(); addVidForm.reset();"

我正在标记我的主要表格 #addVidForm

我还有一些自定义验证器/控件，它们与我拥有的另一种表单相比很特别，在重置表单时不会发生这种情况。

我的验证器如下：

 static mustBeVimeo(control: AbstractControl) : ValidationErrors | null {

        if((control.value as string).startsWith("https://vimeo.com/")){ return null } else
        if((control.value as string).startsWith("http://vimeo.com/")){ return null }
        else { return { mustBeVimeo : true } }

}

这是我在后端的表单：

this.addVideoForm = new FormGroup({
      title: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
      description: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
      category: new FormControl('', [Validators.required]),
      link: new FormControl('', [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
      visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
    })

我还做了一个函数，它只是在后端重置表单并用一个按钮调用它，我得到了同样的错误。

不完全确定这整个事情的哪一部分失败了。该字段是正常输入，就像我在其他地方使用的一样。

Answer 1

发现另一个堆栈溢出线程，在注释中描述了 form.reset() 函数实际执行的操作，即将所有值设置为空而不是其初始值。

我不想在重置时手动设置每个表单控件的值，因此我创建了一个函数，只需在提交时重新声明表单即可。像这样：

  resetForm() {
    this.addVideoForm = new FormGroup({
      title: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
      description: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]),
      category: new FormControl('', [Validators.required]),
      link: new FormControl('', [Validators.required, AddVideoValidators.mustBeVimeo, Validators.maxLength(100)]),
      visibleToGuests: new FormControl(this.visibleToGuests, [Validators.required])
    })
  }