0
votes

modifier le style invalide && touché

J'essaie de changer un style de balise i lorsqu'un autre champ est touché et invalide comme suit, mais rien ne change vraiment avec i , seule la balise input change.

 <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text bg-white">
          <i class="fas fa-user circle"  [class.green-icon]="CardOwnerName.valid" [class.red-icon]="CardOwnerName.invalid && CardOwnerName.touched"></i>
        </div>
      </div>
      <input #CardOwnerName formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>
    </div>  
  </div>

input.ng-touched.ng-invalid
{
    border-color: red;
}

input.ng-valid
{
    border-color: green ;
}

.green-icon
{
    color:green;
}
.red-icon
{
    color:red;
}

Je suppose qu'il me manque quelque chose avec ma version Angular. Peut-être que quelque chose était obsolète?

angular html css angular7

3 commentaires

Utilisez-vous un formulaire basé sur un modèle ou un formulaire réactif

J'utilise une forme réactive

Remplacez CardOwnerName.valid par myForm.controls.CardOwnerName.valid . Ou renommez l'alias du modèle.

3 Réponses :

1
votes

Supprimez la référence de l'élément dans le modèle et accédez à la place à l'objet de formulaire:

get CardOwnerName() {
    return this./* form group name here */.get('CardOwnerName');
}

<input formControlName="CardOwnerName" name="CardOwnerName" class="form-control" placeholder="Card Owner Name" required>

2 commentaires

est-ce que cela fonctionnera pour la balise i ? Je connais cette approche mais j'aimerais changer le style d'une autre balise en fonction des validations de CardOwnerName .

Oui, avec ces modifications, le reste du modèle devrait fonctionner tel quel. Je pense.

0
votes

Essayez comme ceci:

<i class="fas fa-user circle" [ngClass]="(form.get('CardOwnerName').valid)?'green-icon':'red-icon'"  ></i>

ou,

 <i class="fas fa-user circle" [ngClass]="{'red-icon': form.get('CardOwnerName').invalid, 'green-icon': form.get('CardOwnerName').valid }"  ></i>

Démonstration fonctionnelle

6 commentaires

la première option fonctionne. presque. Cela fonctionne comme prévu mais la console a une erreur: ExpressionChangedAfterItHasBeenCheckedError: L'expression a changé après avoir été vérifiée. Valeur précédente: 'icône verte: vrai'. Valeur actuelle: 'green-icon: false'. cela se produit lors du chargement de la page

Pouvez-vous vérifier la démo que j'ai ajoutée, quelque chose d'autre est à l'origine de ce problème, vous pouvez également partager votre code dans stackbiltz

la démo a l'air bien. Mais cela fonctionne aussi pour moi comme prévu. le problème est lors de l'ouverture des outils de développement dans Chrome. Je vois soudain qu'il y a une erreur, bien que cela fonctionne dans le client

Ya, ExpressionChangedAfterItHasBeenCheckedError peut se produire pour diverses raisons. Pouvez-vous afficher votre code complet dans stackbiltz. Comme vous pouvez le voir dans la démo que j'ai partagée, cela ne se produit pas dans mon cas.

Oui. J'essaierai de le faire dès que possible ... c'est la première fois que je télécharge sur stackblitz

un projet git peut-il aider? Je ne peux pas télécharger un projet stackblitz pour une raison quelconque. a ouvert un rapport de bogue pour cela. mon projet git

0
votes

l'erreur corrigée par ChangeDetectionRef.

import {ChangeDetectorRef } from '@angular/core';

constructor( private cdref: ChangeDetectorRef ) {}
ngOnInit() {
this.cdref.detectChanges();
 }

0 commentaires