角度：选择所需的验证问题

Question

im试图构建一个弹簧启动和角度应用程序，该应用程序允许用户上传文件并输入文件的标签和部门清单，以便我正在使用select 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
        >

提示：使用反应性表单而不是模板驱动的表单