html – Angular 4重置按钮重置DropDown默认值
发布时间:2020-12-14 19:38:07 所属栏目:资源 来源:网络整理
导读:我有一个看起来像这样的表单: 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" cla
我有一个看起来像这样的表单:
<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> 布局如下所示: 单击“重置”按钮时,下拉列表的默认值将消失 – 如下图所示. 即使在按下重置按钮后,如何确保保留默认值? 有任何想法吗? 解决方法
在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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |