Struggling with adding a form to my Angular website, the error indicated by VScode is in the title.
Below is the code snippet from LoginComponent.html where the error occurs at both instances of the word "form".
<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">
Email is required.
</p>
<p *ngIf="Mail?.hasError('email')" class="error">
Email format must be valid.
</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">
Password is required.
</p>
<p *ngIf="Password?.errors?.minlength
" class="error">
Password must be 8 characters or more.
</p>
</div>
<br/>
<div>
<button type="submit">Sign In</button>
</div>
</form>
<div>
<p>Debugger to demonstrate direct binding to the form <strong>{{form.value.email}} </strong><strong>{{form.value.password}} </strong><p> <-- encountered error here as well.
<br>
</div>
The error message "Property 'form' does not exist on type 'LoginComponent'" appears in every occurrence of the word "form" in my LoginComponent.ts code below.
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 {
// Inject formBuilder in constructor
constructor(private formBuilder: FormBuilder){
/// Create control group for login form
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){
// Prevent default submit behavior
event.preventDefault;
if (this.form.valid){
// Call service to send data to server
alert("All good! Submit form!")
}else{
// Mark all fields as touched to display error messages
this.form.markAllAsTouched();
}
}
}