Angular 5表单文本框错误时边框未变红问题求助

嘿，我来帮你排查这个问题！看了你的代码，我发现几个可能的关键点，咱们一步步来解决：

1. 最可能的原因：没把displayCss绑定到元素上 #

你写了displayCss方法来返回has-error类，但模板里根本没把这个类应用到对应的元素上！这就好比你做好了样式，却没告诉页面什么时候用它😅。

你需要把[ngClass]="displayCss('name')"加到输入框的父容器或者输入框本身，比如：

<!-- 绑定到form-group容器 -->
<div class="form-group" [ngClass]="displayCss('name')">
  <input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required>
  <app-error-field [displayError]="isValid('name')" errorMsg="Please provide the link of your youtube video "></app-error-field>
</div>

或者直接绑在input上：

<input class="form-control" [ngClass]="displayCss('name')" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required>

2. 优化CSS选择器的优先级 #

即使绑定了类，Bootstrap的.form-control默认样式优先级可能比你的.has-error高，哪怕加了!important也可能不生效。你可以把CSS写得更具体，确保能覆盖默认样式：

.form-control.has-error {
  border-color: red !important;
}

3. 确认isValid函数的返回逻辑 #

虽然你说它能正确识别错误，但还是要确认一下：当字段验证失败时，isValid是不是返回true？因为你的displayCss里是把has-error和this.isValid(field)绑定的，所以正确的逻辑应该是：

isValid(field: string): boolean {
  const control = this.yourFormGroup.get(field); // 替换成你的表单组变量名
  // 只有当字段无效，且用户已经触摸/修改过它时，才返回true
  return control.invalid && (control.dirty || control.touched);
}

可选：用Angular自带的表单状态类更省心 #

其实Angular会自动给表单控件添加状态类，比如ng-invalid（无效时）、ng-touched（用户触摸过），你可以直接用这些类写样式，不用自己写displayCss：

.form-control.ng-invalid.ng-touched {
  border-color: red !important;
}

这样就省去了自定义方法的步骤，更简洁高效~

内容的提问来源于stack exchange，提问作者Wasif