I had an error "Cannot read properties of undefined (reading 'resetForm')"

Question

I have a method named it onSubmit, this method submits my reactive form.

onSubmit(){
    this.comment = this.commentForm.value;
    console.log(this.comment);
    if(this.dishcopy !== null && this.dish !== null){
      this.dishcopy.comments.push(this.comment)
      this.dishService.putDish(this.dishcopy)
        .subscribe({
          next: dish => {this.dish = dish; this.dishcopy = dish},
          error: ermess =>{this.dish = null; this.dishcopy = null; this.errMess = <any>ermess}

        })
    }
    this.commentForm.reset({
      author: '',
      comment_author: '',
    })


    this.commentFormDirective.resetForm()

  }

When I enter my value, like this

enter image description here on my form

I have an error enter image description here

So I'm not giving up. And I started searching for answers on the inte.net. I find one answer that I need to add to my

this.commentFormDirective.resetForm()

like?

this.commentFormDirective?.resetForm()

And I got any error except:

enter image description here my error handler

In addition, I show you my error to clarify this:

  putDish(dish:Dish): Observable<Dish> {
     const httpOptions = {
       headers: new HttpHeaders({
         'Content-Type': 'application/json'
       })
     }
     return this.http.put<Dish>(baseURL + 'dishes/' + dish.id, dish, httpOptions)
       .pipe(e => this.processHttpMsgService.handleError(e))
  }

Answer 1

Your first error occurs because commentFormDirective property is undefined. It should be initialized or injected with constructor if provided somewhere else.

The 404 errors in your console are about missing fonts, it is not related to your API calls.