Angular Reactive Forms, formName.reset() works but throws error 'control.value is null' and all fields are marked 'red' and invalid?

Question

I have an angular reactive form and on submit I have this code:

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

I am marking my main form with #addVidForm

I also have some custom validators/controls which is special vs another form that I have where this does not occur when resetting the form.

My validator is as follows:

 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 is my form on the backend:

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])
    })

I have also made a function that just resets the form on the backend and call that with a button and I'm getting the same error.

Not entirely sure which part of this whole thing is failing. That field is a normal input like I'm using in other places.

Answer 1

Found another stack overflow thread where in the comments it described what the form.reset() function actually does which is setting all values to nulls instead of their initial values.

I didn't want to manually set the value of each form control upon reset so instead I made a function where I simply re-declare the form on submit. Like this:

  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])
    })
  }