Estoy trabajando en un formulario de inicio de sesión y si el usuario ingresa credenciales no válidas, queremos marcar los campos de correo electrónico y contraseña como no válidos y mostrar un mensaje que dice que el inicio de sesión falló. ¿Cómo hago para configurar estos campos para que no sean válidos a partir de una devolución de llamada observable?
Modelo:
<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm"> <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch"> <md-input-container> <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"> </md-input-container> <md-input-container> <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password"> </md-input-container> <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p> <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center"> <md-checkbox class="remember-me">Remember Me</md-checkbox> <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a> </div> <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button> <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p> </div> </form>Método de inicio de sesión:
@ViewChild('loginForm') loginForm: HTMLFormElement; private login(formData: any): void { this.authService.login(formData).subscribe(res => { alert(`Congrats, you have logged in. We don't have anywhere to send you right now though, but congrats regardless!`); }, error => { this.loginFailed = true; // This displays the error message, I don't really like this, but that's another issue. this.loginForm.controls.email.invalid = true; this.loginForm.controls.password.invalid = true; }); } Además de configurar el indicador de entradas no válidas en verdadero, he intentado configurar el indicador email.valid en falso y configurar loginForm.invalid en verdadero también. Ninguno de estos hace que las entradas muestren su estado no válido.
en componente:
formData.form.controls['email'].setErrors({'incorrect': true});y en HTML:
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel"> <div *ngIf="!email.valid">{{email.errors| json}}</div>Agregando a la respuesta de Julia Passynkova
Para establecer el error de validación en el componente:
formData.form.controls['email'].setErrors({'incorrect': true});Para desarmar el error de validación en el componente:
formData.form.controls['email'].setErrors(null); Tenga cuidado al desarmar los errores usando null ya que esto sobrescribirá todos los errores. Si desea mantener algunos, es posible que primero deba verificar la existencia de otros errores:
if (isIncorrectOnlyError){ formData.form.controls['email'].setErrors(null); }En la nueva versión del material 2, cuyo nombre de control comienza con el prefijo mat setErrors() no funciona, en cambio, la respuesta de Juila se puede cambiar a:
formData.form.controls['email'].markAsTouched();