Html 发生错误时，我发现很难在边框上显示红色

嗨，我是angular 5的新手，我正在创建一个表单，其中有一个文本字段，当出现错误时，它会显示文本字段的错误消息，但边框线不会变为红色

这是我的密码

<div class="form-group">
    <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>

}

对于“has error”，我使用以下css：

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

}

---

把这一切放在一边，我没有得到应有的结果。。请让我知道我在哪里犯了错误，我被卡住了。

首先，您可以在输入字段中设置style属性，在那里您可以设置类似style=“border:1px solid red”的属性，或者您可以在CSS中设置，在CSS中写入border color=red替换为border:1px solid red

首先，您可以在输入字段中设置style属性，在那里您可以设置类似style=“border:1px solid red”的属性，或者您可以在CSS中设置，在CSS中您已经编写了border color=red替换为border:1px solid red

border: 1px solid red !important;

希望这能对你有所帮助

---

希望这能对你有所帮助

您的代码片段没有显示如何使用displayCss。发生错误时添加类的替代方法

[class]="'error': youTubeLinkInput.invalid :''"



<input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required #youTubeLinkInput="ngModel" [class]="'error': youTubeLinkInput.invalid :''">

---

您的代码片段没有显示如何使用displayCss。发生错误时添加类的替代方法

[class]="'error': youTubeLinkInput.invalid :''"



<input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required #youTubeLinkInput="ngModel" [class]="'error': youTubeLinkInput.invalid :''">

---

您似乎混淆了displayError和displayCss，您正在谈论displayCss，但实际上并没有在代码中使用它。如果您想在出现错误的情况下使用类，您必须这样使用

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

  </div>

---

您似乎混淆了displayError和displayCss，您正在谈论displayCss，但实际上并没有在代码中使用它。如果您想在出现错误的情况下使用类，您必须这样使用

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

  </div>

可能是因为您没有为边框设置任何宽度？类似：

边框：1px纯红我也尝试过，但也不起作用。您实际上似乎没有在任何地方使用displayCss，请给出一个答案。这可能是因为您没有为边框设置任何宽度？类似：
边框：1px纯红
我也尝试过，但也不起作用。您实际上似乎没有在任何地方使用displayCss，请给出一个答案。否则，将代码上载到某个位置并共享url。否则，将代码上载到某个位置并共享url。