角度4リセットボタンは、ドロップダウンデフォルト値にリセットします

Question

私はこのようになりますフォームがあります。

<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate> 
      <div class="form-group col-xs-3" > 
      <label for="powerPlantName">PowerPlant Name</label> 
      <input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" /> 
      </div> 
      <div class="form-group col-xs-3" > 
      <label for="powerPlantType">PowerPlant Type</label> 
      <select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType"> 
       <option value="" disabled>--Select Type--</option> 
       <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes"> 
       {{ powerPlantType }} 
       </option> 
      </select> 
      </div> 
      <div class="form-group col-xs-3" > 
      <label for="organizationName">Organization Name</label> 
      <input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" /> 
      </div> 
      <div class="form-group col-xs-3" > 
      <label for="powerPlantStatus">PowerPlant Active Status</label> 
      <select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus"> 
       <option value="" disabled>--Select Status--</option> 
       <option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses"> 
       {{ powerPlantStatus }} 
       </option> 
      </select> 
      </div> 
      <div class="form-group col-md-3 col-xs-4"> 
      <button [disabled]="loading" class="btn btn-primary">Search</button> 
      <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
      </div> 
      <div class="form-group col-md-3 col-xs-3"> 
      <button class="btn btn-primary" (click)="f.reset()">Reset</button> 
      </div> 
     </form> 

のレイアウトは次のようになります。

私はリセットボタンをクリックしてください下の図に示すように、ドロップダウンのデフォルト値は表示されなくなります。

は、どのように私は、デフォルト値もリセットボタンを打った後に保持されていることを確認しますか？

アイデア？

Answer 1

は、HTMLが

<select [(ngModel)]="selectedElement.id"> 
    <option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option> 
</select> 

オンリセット

reset(){ 
    this.selectedElement = {id:-1,Name:'Select One'}; 
    } 

LIVE DEMO

のようになります。 id = -1

types:any[]=[ 
       {id:-1,Name:'Select One'}, 
       {id:1,Name:'abc'}, 
       {id:2,Name:'abdfsdgsc'} 
    ]; 

で要素のリストに付加価値を持っています

Answer 2

f.reset（）をreset（）に変更できます。どこ

reset(){ 
    this.model.powerPlantType = ''; 
    this.model.powerPlantStatus = ''; 
    // and other input resettings too 
    } 

を入れて、それから、私は、これは試してみるだろう

<button type="button" (click)="reset()">Reset</button> 

DEMO