Comment afficher un message d'erreur basé sur les règles de validation personnalisée Angulaire 2?
Je suis à l'aide d'un modèle axé sur la démarche pour construire des formes Angulaire 2 et j'ai créé avec succès les validateurs personnalisés que je peux utiliser dans le modèle.
Cependant, je ne peux pas trouver un moyen pour afficher de message d'erreur spécifique lié à des erreurs spécifiques. Je veux différencier pourquoi le formulaire n'est pas valide. Comment puis-je obtenir?
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Site } from './../site';
import { BackendService } from './../backend.service';
import { email } from './../validators';
import { CustomValidators } from './../validators';
@Component({
templateUrl: 'app/templates/form.component.html',
styleUrls: ['app/css/form.css'],
directives: [CustomValidators.Email, CustomValidators.Url, CustomValidators.Goof],
providers: [BackendService]
})
export class FormComponent {
active = true;
submitted = false;
model = new Site();
onSubmit() {
this.submitted = true;
console.log(this.model);
}
resetForm() {
this.model = new Site();
this.submitted = false;
this.active = false;
setTimeout(() => this.active = true, 0);
}
get diagnostics() {
return JSON.stringify(this.model)
}
}
import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, FormControl } from '@angular/forms';
import { BackendService } from './backend.service';
function validateEmailFactory(backend:BackendService) {
return (c:FormControl) => {
let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
return EMAIL_REGEXP.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
};
}
export module CustomValidators {
@Directive({
selector: '[email][ngModel],[email][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Email), multi: true}
]
})
export class Email {
validator:Function;
constructor(backend:BackendService) {
this.validator = validateEmailFactory(backend);
}
validate(c:FormControl) {
return this.validator(c);
}
}
@Directive({
selector: '[url][ngModel],[url][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Url), multi: true}
]
})
export class Url {
validator:Function;
constructor(backend:BackendService) {
this.validator = validateEmailFactory(backend);
}
validate(c:FormControl) {
var pattern = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
return pattern.test(c.value) ? null : {
validateEmail: {
valid: false
}
};
}
}
@Directive({
selector: '[goof][ngModel],[goof][formControl]',
providers: [
{provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidators.Goof), multi: true}
]
})
export class Goof {
validate(c:FormControl) {
return {
validateGoof: {
valid: false
}
};
}
}
}
OriginalL'auteur eloquent_poltergeist | 2016-07-25
Vous devez vous connecter pour publier un commentaire.
Vous pouvez simplement vérifier la
AbstractControl#hasError(...)
méthode pour voir si le contrôle a une erreur spécifique.FormGroup
etFormControl
sont à la foisAbstractControl
s. pourFormControl
vous venez de passer en argument de l'erreur de nom. Par exempleLe programme de validation de la méthode doit retourner une chaîne de caractères/boolean carte, où la clé est le nom de l'erreur. C'est le nom que vous vérifiez dans
hasError
méthode.Pour
FormGroup
vous pouvez passer un paramètre supplémentaire le chemin d'accès à laFormControl
.name
est tout simplement l'identifiant de laFormControl
pour l'entrée.Voici un exemple avec les deux
FormControl
et laFormGroup
vérifier.Mise à JOUR
Ok, donc j'ai eu de travail, mais c'est un peu verbeux. Je ne pouvais pas comprendre comment obtenir l'accès à l'individu
FormControl
des entrées. Donc, ce que j'ai fait était juste créer une référence à laFormGroup
Puis ensuite à vérifier la validité, je viens d'utiliser le
hasError
surcharge qui a traversé le chemin de la forme nom de contrôle. Pour<input>
qui utilisentname
etngModel
, lename
valeur est ajoutée à la principaleFormGroup
avec ce nom que leFormControl
nom. Donc vous pouvez y accéder commeen supposant
name=nameCtrl
. Avis de laf.form
. Lef
est leNgForm
instance qui a unFormGroup
variable membreform
.Ci-dessous est la refonte exemple
Dans votre modèle, ces modèles sont créés implicitement pour représenter les entrées. Vous pouvez toujours y accéder à partir du modèle sans avoir à tout membre de variables de modèle à tous. Vous avez juste besoin de créer des variables de référence dans votre modèle. Si vous postez un exemple plus complet, je veux essayer de vous aider avec ça
Par exemple, dans votre formulaire, vous pouvez le faire
<form #f="ngForm">
, et maintenantf
est la variable qui représente laFormGroup
.ngForm
est quelque chose qui est prévu, de sorte que vous n'avez pas besoin de vous soucier d'où ça vient. Aussi pour vos différentes entrées, vous pouvez utiliser<input #nameInput [formControl]="nameInput">
, et lanameInput
serait ajouté à laf
formeFormControl
. Il ya beaucoup de façons différentes de mettre en place les modèles déclaratifs. Si vous avez besoin de plus d'aide, je vais probablement besoin de voir votre installation dans votre modèleJe voudrais un formulaire simple avec 1 entrée (déclarative) qui va dans les deux sens lié avec le modèle ET j'ai accès à la AbstractControl forme le modèle pour vérifier la validité et les messages d'erreur personnalisés. [formControl]="nameInput" lance ne Peut pas se lier à 'formControl', car il n'est pas connu natif de la propriété
Découvrez ma mise à jour. Je l'ai eu à travailler, mais pas de la façon que je pensais que c' doit de travail. Semble que mes suppositions étaient fausses.
OriginalL'auteur Paul Samsotha
J'ai écrit un ensemble de directives similaires à
ng-messages
de AngularJs pour s'attaquer à ce problème dans Angulaire. https://github.com/DmitryEfimenko/ngx-messagesOriginalL'auteur Dmitry
Pour le modèle de moteur, la validation, l'utilisation d'un attribut de la directive comme ci-dessous:
.. avec l'accompagnement des marques dans votre template:
HTH
OriginalL'auteur Glenn Bullock