мне трудно показать красный цвет на границе, когда произошла ошибка

Question

Привет, я новичок в 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>

Я проверяю на наличие ошибок, используя функцию isValid, функция работает правильно, это означает, что она выдает ошибку, но метод displayError для цвета границы не работает.

вот код

displayCss(field: string) {
return {
  'has-error': this.isValid(field),
};

}

и для 'has-error' я использую этот css:

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

}

Помещая все это, я не получаю должного результата ... пожалуйста, дайте мне знать, где я делаю ошибку, я застрял.

Answer 1

Кажется, вы запутались между displayError и displayCss. Вы говорите о displayCss, но на самом деле вы не используете его в своем коде.Если вы хотите использовать класс в случае ошибки, вы должны использовать как это.

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

  </div>

Answer 2

border: 1px solid red !important;

Надеюсь, что это поможет вам.

Answer 3

Фрагмент кода не показывает, как вы используете 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 :''">

Примечание: вам нужно создать локальную переменную (например, youTubeLinkInput) для ссылки на ввод

Теперь вы можете добавить стили к классу ошибок, например

input.error {
   border: 1px solid red;
}

Answer 4

сначала вы можете установить атрибут style во входном файле, и там вы можете установить атрибут как style = "border: 1px solid red" или вы можете установить в CSS, где вы написали border-color = red, заменить на border: 1px сплошной красный;