Property 'form' does not exist on type 'LoginComponent'

Issue

im having trouble to add a form to my website on angular, in the title its shows what its the error that VScode shows me.

Here is the LoginComponent.html On line 1 under the word "form" its where vscode indicate my error, also on the words "form" on the bottom of the code.

    <div>
        <label for="email">Email: </label>                          
        <input type="email" formControlName="email">
    </div>
   
    <div *ngIf="Mail?.errors  && Mail?.touched">    
        <p *ngIf="Mail?.hasError('required')" class="error">
            El email es requerido.
        </p>
        <p *ngIf="Mail?.hasError('email')" class="error">
            El formato del email debe ser válido.
          </p>
    </div>

    <br/>
    <div>
        <label for="exampleInputPassword1" class="form-label">Password: </label>
        <input type="password" formControlName="password" [class.border-danger]="MailValid">
    </div>
    
    <div *ngIf="Password?.errors  && Password?.touched">
    <p *ngIf="Password?.hasError('required')" class="error">
      El password es requerido.
    </p>
    <p *ngIf="Password?.errors?.minlength
" class="error">
      El password debe ser de 8 o más caracteres.
    </p>
  </div>
    <br/>
    <div>
        <button   type="submit">Iniciar Sesión</button>
    </div>
</form>

<div>
 <p>Un debuger para mostrar que es posible hacer un biding directo al formulario <strong>{{form.value.email}} </strong><strong>{{form.value.password}} </strong><p> <--here also shows me the error.
<br> 

</div>

---

And here is my LoginComponent.ts code, also shows me the error message "Property 'form' does not exist on type 'LoginComponent'" in every form word appareance.

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // Inyectar en el constructor el formBuilder
  constructor(private formBuilder: FormBuilder){ 
    ///Creamos el grupo de controles para el formulario de login
    this.form= this.formBuilder.group({
      password:['',[Validators.required, Validators.minLength(8)]],
      email:['', [Validators.required, Validators.email]],
   })
  }

  ngOnInit(): void {
  }
  get Password(){
    return this.form.get("password");
  }
 
  get Mail(){
   return this.form.get("email");
  }

  get PasswordValid(){
    return this.Password?.touched && !this.Password?.valid;
  }

  get MailValid() {
    return false
  }
 

  onEnviar(event: Event){
    // Detenemos la propagación o ejecución del compotamiento submit de un form
    event.preventDefault; 
 
    if (this.form.valid){
      // Llamamos a nuestro servicio para enviar los datos al servidor
      // También podríamos ejecutar alguna lógica extra
      alert("Todo salio bien ¡Enviar formuario!")
    }else{
      // Corremos todas las validaciones para que se ejecuten los mensajes de error en el template     
      this.form.markAllAsTouched(); 
    }
 
  }

}

Solution

I can only assume one of the following is missing.

1. You haven't referenced the form in the HTML like <form [formGroup]="form">

2. You're missing the ReactiveFormsModule in your app.module.ts

But based on your code, I'm wondering... where did you even declare form? Don't you have any linter installed? No surprise that the template cannot find the form.

Answered By - ak.leimrey