Property 'emailId' does not exist on type 'LoginPageComponent'-CodePudding

I am trying to validate a html form in angular using Formcontrol validators. But in html file I am getting an error saying "Property 'emailId' does not exist on type 'LoginPageComponent'."

Here's my html and ts code:

<form [formGroup]="formGroupLogin" id="contact" (ngSubmit)="checkuser()" method="post">
                            <div >
                                <label for="Inputemail"><i ></i>Email </label>
                                <input type="email" formControlName="emailId"  id="emailId" aria-describedby="emailHelp" required>
                                <span [ngClass]="'error'" *ngIf="emailId.invalid && emailId.touched">Email is Invalid</span>
                            </div>
                            <div >
                                <label for="InputPassword"><i ></i>Password</label>
                                <input type="password" formControlName="password"  id="InputPassword" required>
                            </div>

                            <button  name="submit" type="submit" id="contact-submit">Submit</button>
                            

                        </form>

Typescript file:

initForm() {

this.formGroupLogin = new FormGroup({
  emailId: new FormControl('', [Validators.required]),
  password: new FormControl('', Validators.required)
})

}

Can anyone help me out?

CodePudding user response：

emailId is not a object of your component but of your FormGroup.

So you should be using

formGroupLogin.emailId.invalid

CodePudding user response：

The problem is that in your HTML code you have this:

<form [formGroup]="formGroupLogin"

and in yout .ts code you have this

this.formGroup = new FormGroup({

It is not the same form name. formGroupLogin != formGroup

Use same name in both files.

Let me know if it worked for you.