title: Angular 4 Reset Button Resets DropDown Default Value
body: <p>I have a form that looks like this:</p>
  
  <pre><code>&lt;form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid &amp;&amp; searchPowerPlants()" #f="ngForm" novalidate&gt;
            &lt;div class="form-group col-xs-3" &gt;
              &lt;label for="powerPlantName"&gt;PowerPlant Name&lt;/label&gt;
              &lt;input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted &amp;&amp; !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group col-xs-3" &gt;
              &lt;label for="powerPlantType"&gt;PowerPlant Type&lt;/label&gt;
              &lt;select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType"&gt;
                &lt;option value="" disabled&gt;--Select Type--&lt;/option&gt;
                &lt;option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes"&gt;
                  {{ powerPlantType }}
                &lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group col-xs-3" &gt;
              &lt;label for="organizationName"&gt;Organization Name&lt;/label&gt;
              &lt;input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group col-xs-3" &gt;
              &lt;label for="powerPlantStatus"&gt;PowerPlant Active Status&lt;/label&gt;
              &lt;select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus"&gt;
                &lt;option value="" disabled&gt;--Select Status--&lt;/option&gt;
                &lt;option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses"&gt;
                  {{ powerPlantStatus }}
                &lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group col-md-3 col-xs-4"&gt;
              &lt;button [disabled]="loading" class="btn btn-primary"&gt;Search&lt;/button&gt;
              &lt;img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /&gt;
            &lt;/div&gt;
            &lt;div class="form-group col-md-3 col-xs-3"&gt;
              &lt;button class="btn btn-primary" (click)="f.reset()"&gt;Reset&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>The layout for which looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/uKO71.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uKO71.png" alt="enter image description here"></a></p>
  
  <p>When I click the Reset button, the default values for the drop down disappears - as shown in the figure below. </p>
  
  <p><a href="https://i.stack.imgur.com/IkL1u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/IkL1u.png" alt="enter image description here"></a></p>
  
  <p>How do I make sure that the default value is retained even after hitting the Reset button?</p>
  
  <p>Any ideas?</p>