typescript Angular 4 重置按钮重置下拉默认值

Angular 4 Reset Button Resets DropDown Default Value

提问by sparkr

I have a form that looks like this:

我有一个看起来像这样的表格：

<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>

The layout for which looks like this:

其布局如下所示：

When I click the Reset button, the default values for the drop down disappears - as shown in the figure below.

当我点击重置按钮时，下拉菜单的默认值消失了——如下图所示。

How do I make sure that the default value is retained even after hitting the Reset button?

如何确保即使在点击“重置”按钮后仍保留默认值？

Any ideas?

有任何想法吗？

采纳答案by Aravind

Have an additional value in the list of elements with id = -1

在元素列表中有一个附加值 id = -1

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

HTML will look as

HTML 看起来像

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

On Reset

复位时

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

LIVE DEMO

现场演示

回答by Vega

1. Remove the form reference from f.reset(), change to reset(). Where reset() is the component class method:

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

   And then change

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

   DEMO

1. 去掉f.reset()中的表单引用，改为reset()。其中reset()为组件类方法：

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

   然后改变

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

   演示

1. Change the button type from "button" to "reset":
   

   <button type="reset>Reset</button>
   

2. 将按钮类型从“按钮”更改为“重置”：
   

   <button type="reset>Reset</button>
   

Demo

演示