Angular 6 的默认值未在反应式表单中被选中

Question

我有一个如下所示的表格。并且具有默认值的区域下拉列表是“ALL”，其他值是从 api 调用中填充的。

 <form method="POST" for enctype="multipart/form-data" [formGroup]="unitSearchForm">
            <div class="form-group">
              <label for="Zone">Zone</label>
              <select class="form-control" id="zone" formControlName="zoneId">
                <option [ngValue]="0">All</option>
                <option [ngValue]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}</option>
              </select>
            </div>
            <div class="form-group">
              <input class="form-control" type="text" id="search" formControlName="unitName"
                placeholder="Search by Unit Name" />
            </div>
            <div class="form-group">
              <select class="form-control" formControlName="status">
                <option [ngValue]="status.Code" *ngFor="let status of _statusArr">{{status.Name}}</option>
              </select>
            </div>
            <div class="align-self-end form-group">
              <button type="submit" class="btn  btn-primary" (click)="SearchUnits()"><i
                  class="fa fa-fw fa-search"></i>Search</button>
            </div>
          </form>

/*
Component Code
*/

      ngOnInit() {
        this.InitilizeSearchForm();
        this.InitilizeSelectors();
      }


      private InitilizeSearchForm() {
        this.unitSearchForm = this._fb.group({
          zoneId: ['0'],
          unitName:['',Validators.maxLength(100)],
          status:['A']
        });
      }

      private InitilizeSelectors(){
        let searchCriteria: IDictionary = {}
        this._statusArr=this._dataservice.GetStatus();
        this._zones = this._adminService.Getzones(searchCriteria);
        searchCriteria["status"] =  this.unitSaveForm.get('status').value;
      }

如何在区域下拉菜单中选择“全部”？我在初始化表单时尝试设置该值。但它不起作用。总是第一个选择的值什么都不是。

Answer 1

您可以将[value] 绑定用于选项，将[selected] 绑定用于All 选项：

<div class="form-group">
  <label for="Zone">Zone</label>
  <select class="form-control" id="zone" formControlName="zoneId">
    <option value="All" [selected]="'All'">All</option>
    <option [value]="zone.ZoneId" *ngFor="let zone of (_zones|async)?.Result">{{ zone.ZoneName}}
    </option>
  </select>
</div>

查看stackblitz