it-swarm.com.ru

Angular2: изменить цвет границы для ошибки в проверке формы

Попытка изменить цвет границы для сообщения об ошибке. это мой 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>

В настоящее время появляются сообщения об ошибках, но я хочу изменить цвет рамки текста на красный. Как это сделать.

12
NNR

Вы можете использовать директиву ngClass, чтобы добавить класс css в поле ввода, когда оно недопустимо:

<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>

Надеюсь, вам не нужна помощь в написании CSS. :-)

6
Stefan Svrkota

Вот еще одно решение.

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

Если вы осмотрите свое поле ввода, вы увидите некоторые классы CSS, которые Angular динамически присоединяет к вашему элементу, и вы можете воспользоваться ими.

16
Andreas Chatzivasileiadis

Просто найдите .alert-error class в файле css и добавьте свойство border

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

Мы можем достичь разными способами, но я лично предпочел следующий путь.

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

Добавьте это вместо ng-if, потому что это не работает ng-if

Неверное имя. </ Li>

Теперь все, что вам нужно сделать, это добавить класс с именем 

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

или что хочешь и увидишь магию!

Здесь можно поиграть со многими правилами валидации http://jsfiddle.net/rohitkumar93/8rcbz0xt/2/

0
Rohit Kumar