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>