Q:

Angular 5 ngForm: unable to validate select box option on form submission

I want to validate the select box on ngForm submission.
The code is below:
<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>

I want that user cannot be able to submit the form without selecting a value in the select box. It should show the validation error.
Case 1:
When I submit the button with the value = "", the form is not showing any error and no submission happen. 
Case 2:
If I select any value and press submit, the form is submitted.

A:

You need to refer the #cat_list="ngModel" for validation and hence it should be cat_list and not cat..
Change:
<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>

Also try removing the class class="invalid-feedback" which also prevents the error message from displaying.. Because it has the css property as display:none ..

Working Stackblitz

