выберите проверку управления с помощью ngClass в Angular 4

У меня проблема с небольшим стилем при использовании элемента управления select в угловой реактивной форме. Посмотрите на мой код:

<div class="col-md-4">
        <div class="form-group has-feedback" [ngClass]="{ 'has-success': form.controls.field.valid && !form.controls.field.pristine, 'has-danger': !form.controls.field.valid && !form.controls.field.pristine}">
                <label class="form-form-control-label">Field</label>

        <select class="form-control" formControlName="somevalue">
           <option *ngFor="let field of fields" value="{{field.id}}">{{field.name}}</option>
        </select>

        <span class="help-block [style.display]="form.controls.field.valid || form.controls.field.pristine ? 'none': 'inherit'">
           <small *ngIf="form.controls.field.hasError('required')">
               field is required.
           </small>
        </span>

    </div>
 </div>

Я использую эту структуру для каждого ввода в форме. После проверки этот код работает нормально, он не отправляет форму, если какое-либо поле является недопустимым, а границы недопустимых полей становятся красными благодаря [ngClass], которые я использовал в родительском div. Но в этом конкретном поле я использовал элемент управления select для выбора из раскрывающегося списка, и в этом поле отображается ошибка проверки, но красная подсветка на границах не отображается. Я думаю, что есть некоторый стиль по умолчанию для выбора элемента управления, переопределяющего это. Любой знает, почему элемент управления select не получает красную границу при недопустимой передаче, как и остальные поля ввода? Я использую тег ввода в других полях.

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