1

Soy nuevo en angular y es la primera vez que hago un proyecto real, estoy usando un formulario de FormsModule en Angular 15.2.5 para validar el email y la contraseña, pero no funciona el atributo required, he estado investigando un poco y no encuentro la solución al problema, este es el código del componente:

HTML

    <div id="login">
    <h2>Inicio de sesión</h2>
    <form method="post" (ngSubmit)="enviarFormulario()">
        <label id="email">
        Correo electrónico: <br>
        <input type="email" name="email" placeholder="Introduzca su correo" [(ngModel)]="email"  required> 
    </label>
        <label id="password">
        Contraseña: <br>
        <input [attr.type]="passwordVisible? 'text' : 'password' " name="password" placeholder="Introduzca su contraseña" [(ngModel)]="password" required>
        <button type="button" class="toggle-button" [attr.title]="!passwordVisible ? 'Mostrar contraseña':'Ocultar contraseña'" (click)="togglePasswordVisibility()">
            <img [attr.src]="!passwordVisible ? '../../../assets/images/eye_icon.png': '../../../assets/images/closed_eye_icon.png' " alt="Alternar visibilidad de contraseña" width="28" height="20">
        </button>
    </label >
        <button type="submit">Ingresar</button>
        <a href="#">¿Olvidó su contraseña?</a>
    </form>
</div>

TypeScript

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LoginServiceService } from 'src/app/services/login-service.service';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss']
})

export class LoginFormComponent implements OnInit {

  email: string
  password: string
  passwordVisible: boolean

  constructor(private loginService: LoginServiceService) {
    this.email = ''
    this.password = ''
    this.passwordVisible = false
  }

  ngOnInit(): void {

  }

  enviarFormulario(): void {
    this.loginService.iniciarSesion(this.email, this.password).subscribe(response => {
      alert(JSON.stringify(response, null))
    },
      error => {
        alert(`Error en la petición de inicio de sesión: 
        ${JSON.stringify(error)}`)
      })
  }

  togglePasswordVisibility(): void {
    this.passwordVisible = !this.passwordVisible
  }

}

Ya intenté también usar herramientas de inteligencia artificial como ChatGPT o PhindAI y ambas me dicen que el código está perfecto y el required debería funcionar bien, en todo en caso, hay alguna alternativa que pueda utilizar para validar los campos del formulario?

ACTUALIZACIÓN

He revisado el código html ya compilado y por alguna razón se le añade el atributo noValidate al formulario y eso sobreescribe el required de los inputs, cuál podría ser la causa? Adjunto el fragmento del código


    <form _ngcontent-pub-c2="" novalidate="" method="post" class="ng-untouched ng-pristine ng-invalid">
    <label _ngcontent-pub-c2="" id="email"> Correo electrónico: <br _ngcontent-pub-c2="">
    <input _ngcontent-pub-c2="" type="email" name="email" placeholder="Introduzca su correo" required="" ng-reflect-required="" ng-reflect-name="email" ng-reflect-model="" class="ng-untouched ng-pristine ng-invalid">
    </label>
    <label _ngcontent-pub-c2="" id="password"> Contraseña: <br _ngcontent-pub-c2="">
    <input _ngcontent-pub-c2="" name="password" placeholder="Introduzca su contraseña" required="" ng-reflect-required="" ng-reflect-name="password" ng-reflect-model="" type="password" class="ng-untouched ng-pristine ng-invalid">
    <button _ngcontent-pub-c2="" type="button" class="toggle-button" title="Mostrar contraseña">
    <img _ngcontent-pub-c2="" alt="Alternar visibilidad de contraseña" width="28" height="20" src="../../../assets/images/eye_icon.png">
    </button>
    </label>
    <button _ngcontent-pub-c2="" type="submit">Ingresar</button><a _ngcontent-pub-c2="" href="#">¿Olvidó su contraseña?</a></form>

2
  • 3
    Quién le da funcionalidad al atributo required es el navegador. Por lo mismo, sugiero que reduzcas ejemplo mínimo verificable a HTML, por ejemplo, publicando el HTML que recibe el navegador después de evaluar el código empotrado. Por ahora, yo probé quitar ese código y, en chrome sobre windows, si que está funcionando el atributo required.
    – jachguate
    Commented el 27 abr. 2023 a las 0:19
  • Nota: Si usas formularios te recomendaría no usar ngModel ya que de esta manera no podrás usar los formControl de una manera adecuada. ;)
    – Israel-ICM
    Commented el 27 abr. 2023 a las 15:40

1 respuesta 1

1

Prueba importar FormValidators en tu módulo principal de angular:

import { FormGroup, FormControl, Validators } from '@angular/forms';

Un ejemplo, en el ngOnInit() podrías hacer algo como esto:

ngOnInit(): void {
  this.formulario = new FormGroup({
    email: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });
}

Y para que funcione, tienes que usar la directiva formControlName para enlazar los campos de entrada con las propiedades correspondientes del formulario y también usar el [formGroup]="formulario" dentro de la etiqueta <form> para hacer funcionar las directivas, algo así:

<form [formGroup]="formulario" (ngSubmit)="enviarFormulario()">
  ...
  <input type="email" formControlName="email" placeholder="Introduzca su correo">
  ...
  <input [attr.type]="passwordVisible ? 'text' : 'password'" formControlName="password" placeholder="Introduzca su contraseña">
</form>

En donde formulario debes estar instanciado con la clase FormGroup, dentro de tu TS:

formulario: FormGroup;

ngOnInit(): void {
  ...
}

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.