Angular 4 Reset Button Resets DropDown Default Value

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

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

HTML will look as

<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

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

Change the button type from "button" to "reset":
```
<button type="reset>Reset</button>
```

Demo

Related