angular: ERROR: TypeError: Cannot read properties of undefined (reading 'valid')

 

>PROBLEM

When the page loads, the browser's console shows the following error:

  ERROR: TypeError: Cannot read properties of undefined (reading 'valid')

>SOLUTION

1. Check if the HTML template uses form validation. For instance: f.form.valid.

Example:

  <button type="submit" class="btn btn-primary" [disabled]="!f.form.valid">Create info</button>

2. Check the form binding.

It shall be something like this:
#f="ngForm"

>BEFORE

        <form name="modalForm" id="modal_create_info_form" #f novalidate

          (ngSubmit)="f.form.valid && createInfo(modalSelector.value)">

>AFTER

        <form name="modalForm" id="modal_create_info_form" #f="ngForm" novalidate

          (ngSubmit)="f.form.valid && createInfo(modalSelector.value)">

3. Make sure that it declared the respective libs:
 

import { FormControl } from '@angular/forms';

or

// import { FormControl, AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';

>ENV

Angular CLI: 13.2.2

Node: 16.13.1

Package Manager: npm 8.5.4

OS: win32 x64