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

Question

我有一个 Angular react 形式，在提交时我有这个代码:

(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

对于响应式表单，您需要使用 [formGroup] 属性绑定(bind)。它公开了 reset() 公共(public)方法。

模板:

<form [formGroup]="registerForm">
.....
</form>

组件:

this.registerForm.reset();
this.registerForm.markAsPristine();
this.registerForm.markAsUntouched();

您还可以将空值传递给表单值。

this.registerForm.reset(this.registerForm.value);