Soy nuevo en Angular por favor instruirme no se como hago para que mi formulario funcione, estoy utilzando formGroup para aprovechar los metodos de validaciónes y utilizo el metodo get() en el formulario para obtener los datos al enviar.
<form [formGroup]="contactForm" (ngSubmit)="onSubmit(contactForm.get('email'),contactForm.get('password'))">
<div>
<label>Correo</label>
<input type="email" name="email" placeholder="Email" formControlName="email"/>
<span *ngIf="contactForm.get('email')?.touched && contactForm.get('email')?.errors?.['required']"
>Este campo es obligatorio</span>
<span *ngIf="contactForm.get('email')?.touched && contactForm.get('email')?.errors?.['pattern']"
>Introduce una dirección de correo valida</span>
</div>
<div>
<label>Contraseña</label>
<input type="password" name="password" placeholder="Password" formControlName="password"/>
<span *ngIf="contactForm.get('password')?.touched && contactForm.get('password')?.errors?.['required']"
>Este campo es obligatorio</span>
<span *ngIf="contactForm.get('password')?.touched && contactForm.get('password')?.errors?.['minlength']"
>Este campo debe tener un minimo de {{contactForm.get('password')?.errors?.['minlength'].requiredLength}} caracteres</span>
</div>
<div>
<button type="submit" value="enviar" [disabled]="!contactForm.valid" >Enviar</button>
</div>
</form>
Este es mi clase del componente:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../../sevices/user.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
contactForm!: FormGroup;
public email!: string;
public password!: string;
public role: string;
constructor(
private readonly fb: FormBuilder,
private readonly user: UserService
) {
this.role = 'ROLE_ADMIN';
}
ngOnInit(): void {
this.contactForm = this.initForm();
}
initForm(): FormGroup {
return this.fb.group({
email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$')]],
password: ['', [Validators.required, Validators.minLength(6)]],
})
}
onSubmit(email: any, password: any): void {
this.email = email;
this.password = password;
console.log(this.email,this.password);
this.user.login(this.email, this.password, this.role).subscribe(response => {
console.log(response);
});
}
}
Como veran dentro de onSubmit() coloque dos console.log()pero no me muestra nada de nada por la consola ni tampoco errores, asi que intuyo que el metodo onSubmit() lo estoy implementando mal o me falta algún paso porfavor se que es mucho código, pero con que me salga algo por la consola ya estoy felíz.
mi app.module es:
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';;
import { BrowserModule } from '@angular/platform-browser';
import { routing, appRoutingProviders } from './app.routing';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ContactComponent } from './components/contact/contact.component';
import { ErrorComponent } from './components/error/error.component';
import { LoginComponent } from './components/login/login.component';
@NgModule({
declarations: [
AppComponent,
AboutComponent,
ProjectsComponent,
ContactComponent,
ErrorComponent,
LoginComponent
],
imports: [
BrowserModule,
AppRoutingModule,
routing,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }