从 Angular 2 中的 HTML select 元素将 form.invalid 属性设置为 true

我创建了一个包含各种输入元素(主要是文本)的基本表单，所有文本框都有“必需”属性集和一个简单的正则表达式模式。使用 Angular 2 的 Form 指令如果字段文本输入为空或未满足正则表达式，则禁用按钮。这按预期工作。但是，混合使用的是具有 2 个“选项”子元素的“选择”元素。第一个是我的默认值，第二个是我的数据绑定列表。如果最初的话，我想将 form.invalid 属性设置为 true：

<option value="default">Select a department...</option>

从组合框中选择。

我的问题是，如果我在所有文本框中输入有效数据，但将组合框保留为“选择部门...”，则 form.invalid 属性为 false，并且按钮已启用。由于“选择一个部门...”不是一个有效值，如果选择该按钮，我需要将该按钮变为禁用状态？

当前的 HTML 选择代码

<form class="form-inline" #form="ngForm" novalidate>
      <div class="col-sm-12">          
        <div class="form-group" [class.has-error]="AddfirstName.invalid && AddfirstName.touched">
          <label class="col-sm-12 control-label" for="AddfirstName">First Name:</label>
          <div class="col-sm-12">
            <input class="form-control" #AddfirstName="ngModel" required pattern="\D+" placeholder="First Name" [ngModel]="firstName" (ngModelChange)="firstLetterOfFirstNameToUpperCase($event)"
              name="firstName">
            <div class="alert alert-danger" *ngIf="AddfirstName.invalid && AddfirstName.touched ">First Name Is mandatory and cannot contain numbers</div>
          </div>
        </div>
       <div class="form-group" [class.has-error]="AddlastName.invalid && AddlastName.touched">
          <label class="col-sm-12 control-label" for="AddlastName">Last Name:</label>
          <div class="col-sm-12">
            <input class="form-control" #AddlastName="ngModel" required pattern="\D+" placeholder="Last Name" [ngModel]="lastName" (ngModelChange)="firstLetterOfLastNameToUpperCase($event)"
              name="lastName" />
            <div class="alert alert-danger" *ngIf="AddlastName.invalid && AddlastName.touched ">Last Name Is mandatory and cannot contain numbers </div>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group" [class.has-error]="AdduserName.invalid && AdduserName.touched">
          <label class="col-sm-12 control-label" for="AdduserName">User Name:</label>
          <div class="col-sm-12">
            <input class="form-control" #AdduserName="ngModel" required placeholder="User Name" ngModel name="userName" />
            <div class="alert alert-danger" *ngIf="AdduserName.invalid && AdduserName.touched">User Name Is mandatory</div>
          </div>
        </div>
        <div class="form-group"[class.has-error]="Addpassword.invalid && Addpassword.touched">
          <label class="col-sm-12 control-label" for="Addpassword">Password:</label>
          <div class="col-sm-12">
            <input type="password" class="form-control" #Addpassword="ngModel" required placeholder="Password" ngModel name="password" />
            <div class="alert alert-danger" *ngIf="Addpassword.invalid && Addpassword.touched ">Password Is mandatory</div>
          </div>
        </div>
      </div>
     <div class="col-sm-12">
        <div class="form-group" [class.has-error]="hasDepartmentError">
          <label class="col-sm-12 control-label" for="Department">Department:</label>
          <div class="col-sm-12">
            <select class="form-control" id="Department" #AddDepartment="ngModel" [(ngModel)]="addDepartment"
            [ngModelOptions]="{standalone: true}"
            (change)="validateDepartment(AddDepartment.value)"  
            (blur)="validateDepartment(AddDepartment.value)">
            <option value="default">Select a department...</option>
             <option *ngFor="let department of departmentList">{{department.name}}</option>
          </select>
          <div class="alert alert-danger" *ngIf="hasDepartmentError">Department Is mandatory</div>
          </div>
        </div>
      </div>
    <div class="col-sm-12">
      <button class="btn btn-primary" (click)="addUser(AddfirstName.value, AddlastName.value, AdduserName.value, Addpassword.value, AddDepartment.value);
        AddfirstName.value=null;AddlastName.value=null;Addpassword.value=null;AdduserName.value=null;" [disabled]="form.invalid">Add</button>
    </div>
  </form>
    </div>
     </div>