Angular 5 ngForm：无法验证表单提交时的选择框选项

Question

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.

Answer 1

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