Angular 5 ngForm: невозможно проверить флажок выбора при отправке формы

Question

Я хочу проверить поле выбора при отправке ngForm.
Код ниже:

<select name="maincatList"
        id="maincatList"
        [ngModel]="cat"
        #cat_list="ngModel"
        class="form-control"
        required>
          <option value="">Select</option>
          <option *ngFor="let cat of responseRawCatList" [value]="cat.id">{{cat.categoryName}}</option>
</select>
<div *ngIf="contentStandalonrFrm.submitted && cat.invalid" class="invalid-feedback">
  <div *ngIf="cat.errors.required">Field is required</div>
</div>

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

Случай 1: Когда я отправляю кнопку с value = "", форма не показывает никаких ошибок и не происходит отправки.

Случай 2: Если я выберу любое значение и нажму "отправить", форма будет отправлена.

Answer 1

Вы должны обратиться к #cat_list="ngModel" для проверки, и поэтому оно должно быть cat_list и , а не cat ..

Изменение:

<div *ngIf="contentStandalonrFrm.submitted && cat.invalid" class="invalid-feedback">
  <div *ngIf="cat.errors.required">Field is required</div>
</div>

To:

<div *ngIf="contentStandalonrFrm.submitted && cat_list.invalid">
    <div *ngIf="cat_list.errors.required" class="text-danger">Field is required</div>
</div>

Также попробуйте удалить класс class="invalid-feedback", который также препятствует отображению сообщения об ошибке. Поскольку оно имеет свойство css как display:none ..

Рабочий стек-блиц