web-dev-qa-db-fra.com

Angular 4 Bouton de réinitialisation réinitialise la valeur par défaut de DropDown

J'ai un formulaire qui ressemble à ceci:

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

La disposition pour laquelle ressemble à ceci:

enter image description here

Lorsque je clique sur le bouton Réinitialiser, les valeurs par défaut de la liste déroulante disparaissent - comme indiqué dans la figure ci-dessous.

enter image description here

Comment puis-je m'assurer que la valeur par défaut est conservée même après avoir appuyé sur le bouton Réinitialiser?

Des idées?

javascripthtmlangulartypescriptdropdown
7
sparkr

Avoir une valeur supplémentaire dans la liste des éléments avec id = -1

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

HTML ressemblera à

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

Lors de la réinitialisation

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

DEMO EN DIRECT

6
Aravind

  1. Supprimez la référence de formulaire de f.reset (), passez à reset (). Où reset () est la méthode de classe de composants:

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

    Et puis changer

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

    DÉMO

  1. Changez le type de bouton de "bouton" en "réinitialiser":

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

Démo

5
Vega