Question

尝试更改错误消息的边框颜色。这是我的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>

目前显示错误消息，但我想将文本框边框颜色更改为红色。怎么做。

Answer 1

这是另一种解决方案。

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

如果你检查你的输入字段，你可以看到Angular动态附加到你可以利用的元素的一些css类。

Answer 2

您可以使用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的帮助。： - ）

Answer 3

只需在css文件中找到 .alert-error类，然后添加 border属性。

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

Answer 4

添加此而不是ng-if，因为这不是ng-if works

名称无效。

现在您需要做的就是添加一个名为

的类

aryTblContentfromHome[0]["movieList"]!![0]["likesPer"]!!["text"] as?String

aryComments[0]["userName"]!!["text"] as?String

或者你想要什么，看看魔术！

这里有许多验证规则的小提琴 http://jsfiddle.net/rohitkumar93/8rcbz0xt/2/

Answer 5

我们可以采用不同的方法，但是我个人更喜欢以下方法。

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

Angular2：在表单验证中更改错误的边框颜色

5 个答案: