Angular Form Validation Error - Cannot read property 'errors' of undefined

Question

I tried to use angular form to validate user's input in a "ionic generated component" but error as mentioned in the title kept occurring.

Angular forms and validations used in "ionic generated pages" are working fine.

Any ideas?

Picture of :

HTML Component

Error

TypeScript Component

Answer 1

I managed to fix this by using the solution here https://stackoverflow.com/a/57251807/9516387

Which is:

You checking for the presence of an error where no error might exist.

You want something like this:

f.email.errors?.required

Or even:

f.email?.errors?.required

Do the same for the password field and anywhere else where the property might not exist when it is first called.

Answer 2

You should try to access it by f.controls.recipientName.errors