Comment puis-je définir manuellement un champ de formulaire angulaire comme invalide?

Je travaille sur un formulaire de connexion et si l'utilisateur entre des informations d'identification non valides, nous voulons marquer les champs e-mail et mot de passe comme non valides et afficher un message indiquant que la connexion a échoué. Comment puis-je définir ces champs pour qu'ils ne soient pas valides à partir d'un rappel observable?

Modèle:

<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éthode de connexion:

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

En plus de définir l'indicateur non valide des entrées sur true, j'ai essayé de définir l' email.validindicateur sur false et de définir également le paramètre loginForm.invalidsur true. Aucun de ces éléments ne provoque l'affichage de l'état invalide des entrées.

dans le composant:

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

et en HTML:

<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"  #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>

Ajout à la réponse de Julia Passynkova

Pour définir l'erreur de validation dans le composant:

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

Pour annuler l'erreur de validation dans le composant:

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

Soyez prudent en désactivant les erreurs en utilisant nullcar cela écrasera toutes les erreurs. Si vous souhaitez en conserver, vous devrez peut-être d'abord vérifier l'existence d'autres erreurs:

if (isIncorrectOnlyError){
   formData.form.controls['email'].setErrors(null);
}

J'essayais d'appeler à l' setErrors()intérieur d'un gestionnaire ngModelChange sous forme de modèle. Cela n'a pas fonctionné jusqu'à ce que j'attende un tick avec setTimeout():

modèle:

<input type="password" [(ngModel)]="user.password" class="form-control" 
 id="password" name="password" required (ngModelChange)="checkPasswords()">

<input type="password" [(ngModel)]="pwConfirm" class="form-control"
 id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
 #pwConfirmModel="ngModel">

<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
   Passwords do not match
</div>

composant:

@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;

checkPasswords() {
  if (this.pwConfirm.length >= this.user.password.length &&
      this.pwConfirm !== this.user.password) {
    console.log('passwords do not match');
    // setErrors() must be called after change detection runs
    setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
  } else {
    // to clear the error, we don't have to wait
    this.pwConfirmModel.control.setErrors(null);
  }
}

Des pièges comme celui-ci me font préférer les formes réactives.

Dans la nouvelle version du matériau 2 dont le nom de contrôle commence par le préfixe mat setErrors () ne fonctionne pas, la réponse de Juila peut être changée en:

formData.form.controls['email'].markAsTouched();

Voici un exemple qui fonctionne:

MatchPassword(AC: FormControl) {
  let dataForm = AC.parent;
  if(!dataForm) return null;

  var newPasswordRepeat = dataForm.get('newPasswordRepeat');
  let password = dataForm.get('newPassword').value;
  let confirmPassword = newPasswordRepeat.value;

  if(password != confirmPassword) {
    /* for newPasswordRepeat from current field "newPassword" */
    dataForm.controls["newPasswordRepeat"].setErrors( {MatchPassword: true} );
    if( newPasswordRepeat == AC ) {
      /* for current field "newPasswordRepeat" */
      return {newPasswordRepeat: {MatchPassword: true} };
    }
  } else {
    dataForm.controls["newPasswordRepeat"].setErrors( null );
  }
  return null;
}

createForm() {
  this.dataForm = this.fb.group({
    password: [ "", Validators.required ],
    newPassword: [ "", [ Validators.required, Validators.minLength(6), this.MatchPassword] ],
    newPasswordRepeat: [ "", [Validators.required, this.MatchPassword] ]
  });
}

Dans mon formulaire réactif, je devais marquer un champ comme invalide si un autre champ était coché. Dans la version ng 7, j'ai fait ce qui suit:

    const checkboxField = this.form.get('<name of field>');
    const dropDownField = this.form.get('<name of field>');

    this.checkboxField$ = checkboxField.valueChanges
        .subscribe((checked: boolean) => {
            if(checked) {
                dropDownField.setValidators(Validators.required);
                dropDownField.setErrors({ required: true });
                dropDownField.markAsDirty();
            } else {
                dropDownField.clearValidators();
                dropDownField.markAsPristine();
            }
        });

Donc ci-dessus, lorsque je coche la case, il définit la liste déroulante comme requis et le marque comme sale. Si vous ne le marquez pas comme tel, il ne sera pas invalide (par erreur) tant que vous n'aurez pas essayé de soumettre le formulaire ou d'interagir avec lui.

Si la case à cocher est définie sur false (non cochée), nous effaçons le validateur requis dans la liste déroulante et le réinitialisons à un état vierge.

N'oubliez pas non plus de vous désabonner de la surveillance des changements de champ!

Vous pouvez également changer le type de viewChild en NgForm comme dans:

@ViewChild('loginForm') loginForm: NgForm;

Et puis référencez vos contrôles de la même manière que @Julia l'a mentionné:

 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'].setErrors({ 'incorrect': true});
      this.loginForm.controls['password'].setErrors({ 'incorrect': true});
    });
  }

La définition des erreurs sur null effacera les erreurs sur l'interface utilisateur:

this.loginForm.controls['email'].setErrors(null);

Bien que sa solution tardive mais suivante ait fonctionné pour moi.

    let control = this.registerForm.controls['controlName'];
    control.setErrors({backend: {someProp: "Invalid Data"}});
    let message = control.errors['backend'].someProp;

Pour le test unitaire:

spyOn(component.form, 'valid').and.returnValue(true);