J'ai un formulaire utilisateur dans lequel j'ai plusieurs champs et sur la base du type de l'utilisateur, j'ai utilisé des formes réactives angulaires et que vous souhaitez valider mes champs
Voici mon composant TS code: < Pré> xxx
Ce code fonctionne bien, mais je cherche une manière optimisée de la valider, comment puis-je faire cela afin que je n'ai pas à appliquer à plusieurs reprises une validation sur les mêmes champs?
3 Réponses :
Vous pouvez réorganiser vos conditions de validation.
Appliquez la validation directement à la déclaration commune à tous les 3 types.
réorganiser Vous n'avez pas besoin d'appeler J'ai remarqué d'autres problèmes avec votre code. Il y a une faute de frappe en ligne HTML 12. devrait être
si sinon bloquer dans updatevalidators fonction
updatevalueandvalidité sur le contrôle de laquelle la validation ne change jamais.
Onchange La fonction ne s'appelle jamais de HTML.
updatevalidators ne pas être appelé lorsque le formulaire initialisé. Dans ce cas, il est nécessaire car vous attribuez une valeur «utilisateur» pour taper le contrôle. Ajoutez ces 2 lignes après l'initialisation du formulaire.
Vous pouvez écrire une fonction de validateur personnalisée qui applique une validation différente basée sur le type d'utilisateur actuel:
this.userformGroup.controls.type.valueChanges.subscribe(type => {
this.type = type;
Object.keys(this.userformGroup.controls).forEach(key => {
if (key !== 'type') {
this.userformGroup.controls[key].updateValueAndValidity();
}
})
});
Au lieu de faire des fonctions de validation personnalisées ou d'écrire trop de code dans le composant, vous pouvez utiliser la validation basée sur la sélection de l'utilisateur à l'aide d'une expression conditionnelle, j'ai utilisé ici la validation des validateurs @RXWeb (RxWebValidators).
L'optimal code est: Stackblitz Exemple de travail
@Deborahk dans le lien que vous avez fourni indique:
Seuls-même: une fois vrai, seules mettent à jour ce contrôle. Lorsque fausse ou non fournie, mettez à jour tous les ancêtres directs. La valeur par défaut est false . Il ne met pas à jour le statut de validation sur les enfants.