html – Angular 4重置按钮重置DropDown默认值

概述我有一个看起来像这样的表单： <form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate> <div class="form-group col-xs-3" > <label for="po 我有一个看起来像这样的表单：

<form  name="powerPlantSearchForm" (ngsubmit)="f.valID && searchPowerPlants()" #f="ngForm" novalIDate>          <div  >            <label for="powerPlantname">PowerPlant name</label>            <input type="text"  [ngClass]="{ 'has-error': f.submitted && !powerPlantname.valID }" name="powerPlantname" [(ngModel)]="model.powerPlantname" #powerPlantname="ngModel" />          </div>          <div  >            <label for="powerPlantType">PowerPlant Type</label>            <select  [(ngModel)]="model.powerPlantType" name="powerPlantType">              <option value="" Disabled>--Select Type--</option>              <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">                {{ powerPlantType }}              </option>            </select>          </div>          <div  >            <label for="organizationname">Organization name</label>            <input type="text"  name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationname="ngModel" />          </div>          <div  >            <label for="powerPlantStatus">PowerPlant Active Status</label>            <select  [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">              <option value="" Disabled>--Select Status--</option>              <option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">                {{ powerPlantStatus }}              </option>            </select>          </div>          <div >            <button [Disabled]="loading" >Search</button>            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIaifkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQaifkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIDhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAaifkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUliWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAjibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjdiI7HcQ4EMTcpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />          </div>          <div >            <button  (click)="f.reset()">reset</button>          </div>        </form>

布局如下所示：

单击“重置”按钮时,下拉列表的默认值将消失 – 如下图所示.

即使在按下重置按钮后,如何确保保留默认值？

有任何想法吗？

解决方法 在ID = -1的元素列表中有一个额外的值

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

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

总结

以上是内存溢出为你收集整理的html – Angular 4重置按钮重置DropDown默认值全部内容，希望文章能够帮你解决html – Angular 4重置按钮重置DropDown默认值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。