Html Angular2：更改表单验证错误的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39764299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2: change border color for error in form validation
提问by NNR
Trying to change the border color for error message. this is my html 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>
Currently error messages are showing up, but I want to change the textbox border-color to red. How to do that.
当前显示错误消息，但我想将文本框边框颜色更改为红色。怎么做。
采纳答案by Stefan Svrkota
You can use ngClassdirective to add css class to your input field when it is invalid:
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>
Hope you don't need help writing css. :-)
希望您不需要帮助编写 css。:-)
回答by Andreas Chatzivasileiadis
Here is another solution.
这是另一种解决方案。
input.ng-invalid.ng-touched {
border: 1px solid red;
}
If you inspect your input field, you can see some css classes that Angular dynamically attach to your element that you can take advantage of.
如果您检查您的输入字段，您可以看到一些 Angular 动态附加到您可以利用的元素的 css 类。
回答by micronyks
Just find .alert-error class in css fileand add border property.
只需在 css 文件中找到.alert-error 类并添加边框属性。
.alert-error{
...
border:1px solid red;
color:red;
}
回答by Raja Rama Mohan Thavalam
We can achieve different ways, but I personally preferred the following way.
我们可以通过不同的方式实现，但我个人更喜欢以下方式。
HTML
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:
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;
}
