Hoe kan ik handmatig een Angular formulierveld als ongeldig instellen?

Ik werk aan een inlogformulier en als de gebruiker ongeldige gegevens invoert, willen we zowel het e-mail- als het wachtwoordveld als ongeldig markeren en een bericht weergeven met de melding dat de login is mislukt. Hoe stel ik deze velden in als ongeldig vanuit een observeerbare callback?

Sjabloon:

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

Inlog methode:

 @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; 
    });
  }

Naast het op true zetten van de inputs invalid flag heb ik geprobeerd de email.valid flag op false te zetten, en ook de loginForm.invalid op true te zetten. Geen van deze zorgt ervoor dat de inputs hun ongeldige status tonen.

isherwood
Bewerkte vraag 11de0 december 2017 в 8:49
Programmering
validation angular angular2-forms
21ste4 april 2017 в 11:39
1 kijk op
Oplossing

in component:

formData.form.controls['email'].setErrors({'incorrect': true});

en in HTML:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
Vadim Ovchinnikov
Bewerkt antwoord 31ste3 oktober 2019 в 6:01
Commentaren (11)

Aanvulling op Julia Passynkova's antwoord

Om validatiefout in component in te stellen:

formData.form.controls['email'].setErrors({'incorrect': true});

Om validatiefout in component op te heffen:

formData.form.controls['email'].setErrors(null);

Wees voorzichtig met het verwijderen van fouten door null te gebruiken, omdat dit alle fouten zal overschrijven. Als je sommige fouten wilt behouden, moet je eerst controleren of er andere fouten bestaan:

if (isIncorrectOnlyError){
   formData.form.controls['email'].setErrors(null);
}
Vadim Ovchinnikov
Bewerkt antwoord 31ste3 oktober 2019 в 6:01
Commentaren (3)

In nieuwe versie van materiaal 2 waarvan de controlenaam begint met mat voorvoegsel werkt setErrors() niet, in plaats daarvan kan Juila's antwoord worden veranderd in:

formData.form.controls['email'].markAsTouched();
M_Farahmand
Bewerkt antwoord 5de3 juli 2018 в 5:41
Commentaren (0)