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

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>

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

原文由 Nagarjuna Reddy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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。 :-)

原文由 Stefan Svrkota 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是另一个解决方案。

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

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

原文由 Andreas Chatzivasileiadis 发布，翻译遵循 CC BY-SA 3.0 许可协议