J'ai une barre de recherche qui récupère des données de ma base de données, chaque fois que la recherche est réussie, les données récupérées remplissent une table mat, jusqu'à présent si bon et fonctionnent.
Le problème que je suis confronté est quand cette recherche est la suivante: Impossible de récupérer quoi que ce soit de la base de données car l'utilisateur a fourni des informations non valides.
Lorsque je fournisse des données au formulaire d'entrée et que la réponse HTTP échoue, une erreur de type est censée déclencher instantanément, mais cela ne se produit que si Je clique sur le bouton de recherche deux fois.
Ceci est le code que j'ai:
myComponent.component.ts Si j'entraîne des données non valides (données non présentes dans la base de données) Et appuyez sur mon "Search-BTN", mon erreur MAT n'apparaîtra pas, seulement si j'appuie à nouveau sur le bouton. J'ai débogué cela et que le code entre correctement le code prévu: Il définit l'entréeForm comme non valide, mais l'erreur de tapis n'apparaîtra pas avant que je clique sur le butto n Encore une fois ... Quelqu'un sait ce qui pourrait être faux? Merci!
3 Réponses :
La condition de votre En outre, vous n'avez pas besoin de la condition dans la méthode * ngif n'est pas recalculé.
Je pense que vous pouvez le remplacer par quelque chose comme: getterRormessage () méthode. Le message ne sera affiché que si vous avez une erreur pour commencer avec.
Vous pourriez avoir une condition de course menant à cette méthode pour renvoyer une chaîne vide. Essayez de simplifier.
Merci pour la réponse! J'ai essayé cela, mais je dois toujours cliquer deux fois sur le bouton de l'erreur de matelas pour montrer ...
Pouvez-vous publier l'initialisation de votre InputForm ?
J'ai mis à jour ma réponse. Pouvez-vous également vérifier ce que la méthode getterrormessage () est-elle?
Je l'ai changé en ce getterrormessage () car mon bouton de recherche est désactivé lorsque la recherche est invalide et qui ne se produit que lorsque je clique dessus deux fois.
Votre erreur de tapis doit-elle être NGIF *? Peut-il pas simplement utiliser ngclass?
Cela ne fonctionnerait-il pas si vous aviez une propriété de IsinputInvalid, définie sur False intièrement, et si votre méthode de recherche renvoie "non valide", définissez votre propriété ISInputinValid sur true? P> Ensuite, vous pouvez simplement utiliser NGClass: P>
constructor(private router: Router) {
router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
this.isInputInvalid = false;
}
});
J'utilise * NGIF car je veux seulement montrer l'erreur de tapis lorsque ma recherche n'est pas valide ... Je n'ai jamais utilisé la liaison NgClass, qu'est-ce que je suis censé mettre à la place de "ta classe"?
Si vous sthatez votre erreur de tapis pour afficher: Aucun, alors «votre classe» serait une classe CSS avec 'Affichage: Bloc', et lorsque «ISInputInvalid» est défini sur TRUE, la classe CSS serait ajoutée à la touche-erreur. et le style précédent de l'affichage: aucun ne serait défini sur l'affichage: le bloc et l'erreur de matelas rendraient. Voici la ressource angulaire: angular.io/api/common/ngclass#description c'est Vaut la peine de regarder Ngclass et Ngstyle si vous ne les avez pas encore utilisés, ils sont utiles. J'espère que cela t'aides! Remarque, «Votre classe» peut être n'importe quelle classe CSS que vous avez dans le modèle CSS du composant CSS et contenir des styles nécessaires.
Je ne suis pas sûr de l'avoir fait de la bonne façon parce que ça ne marche pas ... je l'ai fait: .hide-mat-erreur {affichage: Aucun; } .Display-Mat-Error {Affichage: Bloc; } dans mon fichier .TS je suis remplacé par this.inputform.setErrors ({'invalide': true}); avec this.inputinvalid = true;
J'ai édité ma réponse, j'espère que tout a du sens et aide!
Je l'ai essayé mais je n'ai aucune chance ... l'erreur de tapis ne s'affiche pas instantanément, je dois toujours appuyer sur le bouton 2 fois. Je ne trouve rien en ligne sur l'utilisation d'une erreur de tapis pour les réponses HTTP
J'ai une situation intéressante ... Si je copie mon code et que je l'ai mis dans un MATDialog, l'erreur de match déclenche instantanément
J'ai pu résoudre mon problème pour que je posterai ma solution pour quiconque pourrait tomber dans ce numéro ...
J'ai créé un booléen Puis, si le booléen est vrai, j'ai défini mon contrôle de forme comme invalide. Dans mon fichier HTML, j'ai entouré mon entrée avec un Voici mon code: myComponent.component.ts MyComponent.Component .html isinputinvalid et définissez-le sur true par défaut . Chaque fois que j'appuie sur mon bouton de recherche, la requête HTTP est exécutée et, en fonction de la réponse, le isinputinvalid booléen est défini sur true ou false. Si la réponse HTTP n'est pas valide, je l'ai définie sur true, si c'est valide, je l'ai défini sur False. [Formgroup] . Pour la validation d'erreur, je définis le * ngif INTÉRIED RechercheForm.Controls ['InputForm']. Non valide .