How to reset drop-down in angular reactive form

Question

I'm using angular reactive forms I have a drop down in my form and I'm using reset method to reset my form , when I'm using the reset option I don't see drop-down is resetting

testing.ts file:

myMethod() {
  this.myForm.reset();
}

testing.html:

<div>
  <select formControlName="abc" (ngModelChange)="myMethod($event)">
    <option value="">Select</option>
    <option *ngFor="let item of items" [ngValue]="item"> {{item.name}}/>
  </select>
</div>
<button type="button" value="reset" (click)=myMethod() />

when I tried this and click on button I see drop down is showing empty value instead of "Select".

Html 5 has a new input coupled with a new datalist tag. Super easy and bindable. — JWP

TechFree TechFree · Accepted Answer · 2019-06-06T11:38:02

Try with resetForm() as :

public resetForm() {
 this.myForm.reset({
  abc: 0
 });
}

Change the default value for first select as :

 <option value="0">Select</option>

How to reset drop-down in angular reactive form

1 Answers