Ionic Tutorial #9 - Error message component for form validation

Ionic Framework Tutorial: creating error messages component for our form validation error messages.

Links:

Doubts? Join me on Discord:

#ionic #tutorial #mobile

[freewalker]

For anyone who got error at file login.page.html, line "<app-error-message [field]= "form.get('email')" error="required" message="Email is mandatory"></app-error-message>", here is how to fix:

// change the field type
@Input() field!: AbstractControl<any, any> | null;
// also, update the if statement to
if (this.field?.touched &&

[mohalquzi]

Hello,
I had this issue when writing:
<app-error-message [field]= "form.get('email')" error="required" message="Email is

The [field] part is giving me an error/warning, an under line red line, meaning something is not alright with my code, even if after following every step in the video for multiple times. However the app is running and functioning.

Error:
"Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl"


After searching:
I found that from the file tsconfig.json.
Changing this part from "strictTemplates": true To "strictTemplates": false, did the trick.
I thought this might help someone. However not sure if this is ok on the long run.

[itwithpauloalves]

Links:




Doubts? Join me on Discord:

[alhanouf]

YOU HELPED US WITH OUR SENIOR PROJECT TYSM!!!

[alhanouf]

Hello sir

I have been facing this problem for days
please help me, I'm working on my senior project :=(

ErrorMessageComponent > should hide error message on field touched, but no errors
Failed: Cannot read properties of undefined (reading 'touched')

[justsomeguywhoneverdies]

12:44 why did you put the "field" inside [], but not "error" and "message"?

[vajidali]

Hello sir how to fatch data from firebase...

I want to fatch data with userId and CategoryId

[johncarpiano]

hello sir i have a little problem about this,

Multiple form field elements in the same form have the same id attribute value. This might prevent the browser from correctly autofilling the form.
To fix this issue, use unique id attribute values for each form field.

its because if i click the password it goes up not like email if i click the input will stay

this is my input in password:

<ion-input name="password" formControlName="password" label-placement="floating" label="Password"
type="password" ></ion-input>

I've been stuck here its really awkward when i click the input password sir. :)

Thank you ;)

[jrdhvrk]

Hi sir please help me. When Ever i try to run ""ionic cordova resources"" i get error of Cordova not installed in path, install Cordova globally.
I have installed Cordova already but i am still getting errors. Please help me i would really appreciate it.

[garaisq]

Even after changing the code for AbstractControl, I am getting the following error. Has someone experienced the same? How could you solve it? Thank you

I am still getting an error in the [field] in login.page.html . My error is: TS2322: Type ‘AbstractControl<any, any> | null’ is not assignable to type ‘AbstractControl<any, any>’. Type ‘null’ is not assignable to type ‘AbstractControl<any, any>’

[HOSTRASOKYRA]

I had the error Failed: Cannot read properties of undefined (reading 'touched')
I added check for undefined in error-message.component.ts
shouldShowComponent() {
&&
if (this.field === undefined)
return false;

if (this.field.touched && {
return true;
}

return false;
}
also i changed declaration to
@Input() field: AbstractControl;