2

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 { }

1 respuesta 1

0

Cambia(ngSubmit) por (submit).

De esta manera:

<form
  [formGroup]="contactForm"
  (submit)="onSubmit(contactForm.get('email'), contactForm.get('password'))"
>

Asegurate de tener importado ReactiveFormsModule en el modulo en el que esté registrado tu componente:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],

//... mas codigo

Te dejo un ejemplo funciona aquí

12
  • No funciona con (submit), lo juro por dios y mi familia entera que lo tengo todo importado.
    – DaniBN
    Commented el 27 dic. 2022 a las 20:01
  • Hola Legna gracias por tu paciencia de verdad te lo agradezco, pero he copiado el código con copiaste puro y del bueno a lo bestía, el código que me has pasado a mi proyecto y mi botón de enviar esta que ni se mueve, no se si reír o llorar jajaj no puedo creer que estas cosas pasen, ahora ya no se si es un problema de versiones y si es así que triste que con cada actualización tengamos que escribir diferente.
    – DaniBN
    Commented el 27 dic. 2022 a las 20:32
  • @DaniBN Que versión de angular estas usando? Suena tonto, pero, ya reiniciaste el servidor de angular? Pararlo e iniciarlo de nuevo. Revisaste el ejemplo que te mande?
    – Legna
    Commented el 27 dic. 2022 a las 20:39
  • Angular CLI: 15.0.1
    – DaniBN
    Commented el 27 dic. 2022 a las 20:43
  • No es un problema de versión. Estamos usando la misma versión. Haz un ng build sobre el proyecto. En ocasiones ng serve no muestra las trazas del error por algúna extraña razón, y puede que lo que estés viendo sea código viejo, no la nueva compilación. De ahí que al hacer ng build pues revisa el código y te muestra si hay algo que no permita correr ng serve.
    – Legna
    Commented el 27 dic. 2022 a las 20:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.