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.
You haven't referenced the form in the HTML like
<form [formGroup]="form">
You're missing the
ReactiveFormsModule
in yourapp.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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.