Comment puis-je définir manuellement un champ de forme angular comme non valide?

Je travaille sur un formulaire de connexion et si l’utilisateur saisit des identifiants non valides, nous souhaitons que les champs email et mot de passe soient non valides et afficher un message indiquant que la connexion a échoué. Comment puis-je régler ces champs pour qu’ils soient invalides à partir d’un rappel observable?

Modèle:

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 d’entrées incorrectes sur true, j’ai essayé de définir l’indicateur email.valid sur false et de définir également loginForm.invalid sur true. Aucun d’entre eux ne provoque l’affichage de l’état invalide des entrées.

en composant:

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

et en html:

  
{{email.errors| json}}

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 supprimer l’erreur de validation dans le composant:

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

Faites attention en supprimant les erreurs en utilisant “null”, car cela écraserait 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 setErrors() dans un gestionnaire ngModelChange sous forme de modèle. Cela n’a pas fonctionné tant que j’ai attendu une coche avec setTimeout() :

modèle:

   
Passwords do not match

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

Les Gotchas comme celui-ci me font préférer des formes réactives.

Dans la nouvelle version du matériel 2 dont le nom de contrôle commence par le préfixe mat, setErrors () ne fonctionne pas, au lieu de cela, la réponse de Juila peut être modifiée comme suit:

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