ANGULAR: выберите необходимый вопрос проверки

Question

я пытаюсь создать весеннюю загрузку и приложение angular, которое позволяет пользователю загрузить файл и ввести тег файла и список департаментов, поэтому я использую тег html выбора и привязываю к нему список. Мне нужна обязательная проверка, если раскрывающийся список не выбран и в заголовке отображается «Выбор».

• , и для ясности я использую NgModel
• Любые решения, ПОЖАЛУЙСТА? ;

ошибка консоли:

ERROR TypeError: Cannot read property 'valid' of undefined

вот мой html код

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12" data-aos="fade-right">
        <label class="btn btn-default">
          <input type="file" (change)="selectFile($event)" />
        </label>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4" data-aos="fade-right">
        <div class="form-group">
          <label for="form"><h5>Tag</h5></label>
          <input
            type="text"
            class="form-control"
            id="tag"
            [(ngModel)]="tag"
            required
          />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4" data-aos="fade-right">
        <label for="form"
          ><h5>Departement: click to select departement</h5></label
        >
        <div class="form-group">
          <select
            name="departement"
            [(ngModel)]="dep"
            class="form-control selectpicker"
            required
          >
            <option
              *ngFor="let departement of departements"
              [value]="departement"
              >{{ departement }}</option
            >
          </select>
        </div>
        <small
          *ngIf="
            (!departement.valid && !dep) ||
            (!departement.valid && departement.dirty)
          "
          >Required (Please select Departement).</small
        >
      </div>
    </div>
    <div class="row" style="margin-bottom: 100px;">
      <div class="col-md-6">
        <button
          class="btn btn-success"
          [disabled]="!selectedFiles"
          (click)="upload()"
          style="background-color: #09c0a3;"
        >
          Upload
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12"></div>
    </div>
  </div>
</div>

Answer 1

Сохранение состояния ngModel в переменной шаблона:

<select     #dptControl="ngModel"
            name="departement"
            [(ngModel)]="dep"
            class="form-control selectpicker"
            required
          >

<small
          *ngIf="
            (!dptControl.valid && !dep) ||
            (!dptControl.valid && dptControl.dirty)
          "
          >Required (Please select Departement).</small
        >

Совет: используйте реактивные формы вместо форм управляемых шаблоном