web-dev-qa-db-fra.com

Angular2: change la couleur de la bordure en cas d'erreur de validation du formulaire

Essayer de changer la couleur de la bordure pour le message d'erreur. c'est mon code html

<div class="form-group">
  <label>Name:</label>
  <div class="wpr">
    <div class="wpr__icon">
      <i class="fa fa-user"></i>
    </div>
    <input #name="ngModel" id="name" name="name" type="text" class="form-control text-line" [(ngModel)]="PersonInfo.name"
      pattern="[a-zA-Z0-9\s]+" required>
  </div>
  <ul class="alert-error" *ngIf="name.touched && name.errors">
    <li *ngIf="name.errors.required"> Name is required. </li>
    <li *ngIf="name.errors.pattern">Invalid name.</li>
  </ul>
</div>

Les messages d'erreur actuels s'affichent, mais je souhaite modifier la couleur de bordure de la zone de texte en rouge. Comment faire ça.

htmlcssangular
12
NNR

Vous pouvez utiliser la directive ngClass pour ajouter une classe css à votre champ de saisie lorsqu'il n'est pas valide:

<input #name="ngModel" id="name" name="name" type="text" class="form-control text-line"
[ngClass]="{'red-border-class': name.errors}" [(ngModel)]="PersonInfo.name" pattern="[a-zA-Z0-9\s]+" required>

J'espère que vous n'avez pas besoin d'aide pour écrire des CSS. :-)

6
Stefan Svrkota

Voici une autre solution.

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

Si vous inspectez votre champ de saisie, vous pouvez voir des classes CSS que Angular attache dynamiquement à votre élément et dont vous pouvez tirer parti.

16
Andreas Chatzivasileiadis

Il suffit de trouver .alert-error class dans un fichier css et d’ajouter une propriété de bordure  

.alert-error{
   ...
   border:1px solid red;
   color:red;
}
1
micronyks

Nous pouvons réaliser différentes manières, mais j'ai personnellement préféré la méthode suivante.

HTML

<form [ngClass]="{ 'form-submit': isSubmit}" (ngSubmit)="onSubmit()" name="forgotPasswordForm" [formGroup]="forgotPasswordForm">                
  <input name="email" type="email" class="form-control" id="email" placeholder="Email" formControlName="email">
  <div class="invalid-feedback form-error" *ngIf="...">
    .......
  </div>  
 </form>

CSS: 

.form-group input.ng-invalid.ng-touched, 
.form-group input.ng-invalid:focus, 
.form-group select.ng-invalid.ng-touched, 
.form-group textarea.ng-invalid.ng-touched,
.form-submit input.ng-invalid,
.form-submit select.ng-invalid,
.form-submit  textarea.ng-invalid
{
    border-color: #ff4c6a;
}

.invalid-feedback.form-error {
    display: block;
}
0
Raja Rama Mohan Thavalam

Ajouter ceci au lieu de ng-if parce que ce n'est pas ng-if fonctionne

Nom invalide. </ Li>

Il ne reste plus qu’à ajouter une classe appelée 

.has-error {
      border-bottom: 2px solid red;
}

ou ce que vous voulez et voyez la magie!

Voici un moyen de jouer avec de nombreuses règles de validation .__ http://jsfiddle.net/rohitkumar93/8rcbz0xt/2/

0
Rohit Kumar