how to Reset Select to default value Angular2

Question

I have a select with first option as hard coded one just to show the place holder and list of objects, on click of clear i need to reset the select to the first option, I am not able to do that here, is there a way ??

<select class="form-control" aria-placeholder="Select File" style=" margin-right:5px;padding:0px;width:400px" [(ngModel)]="ddlFileId" (change)="loadFiles($event.target.value)"  [ngModelOptions]="{standalone: true}" >
    <option [value]="''" disabled selected>Select File</option> // this will appear like a place holder
    <option *ngFor="let file of AllFileIDS" [value]="file.FileID" [ngValue]="file.FileID">{{file.FileID}}</option>
</select>

I tried

  this.ddlFileId = "";

My attempts

• Made the data source empty and re assigned it
• Gave a value instead of "" to [(ngmodel)]
• i even added a flag and tried to assign it to [selected] it was stil not working

is there any way other way than making this a dictionary and adding first object into it with setting disabled property as a flag to it ?, thats what iam planning now.

Other SO questions didn't help me

Answer 1

I'm not exactly sure how you are resetting your form, but I've struggled with resetting selects back to a default value in Angular 2 as well. However I have gotten it to work with some custom setting of values. In my scenario I use 0 as the default value for my select but I tried '' and it works as well. I swapped out my 0 default with your empty string default below. Note that I didn't use the binding [value] but just a regular value and only single quotes, not double quotes as you did.

<select id="selectSchool" [disabled]="user.roleId>2" class="form-control" [(ngModel)]="model.schoolId" name="schoolid" required (ngModelChange)="onSchoolChange($event)">
    <!--<option value="0" selected>Select School</option>-->
    <option value='' disabled selected>Select File</option>
    <option value="{{school.id}}" *ngFor="let school of schools">{{school.name}}</option>
</select>

I pull in my form to my component.ts file using ViewChild:

import { ViewChild, Component, OnInit } from '@angular/core';

Set the form to a variable in component:

export class UserComponent {
    @ViewChild("f")
    f: NgForm;

My form tag in the HTML template looks like this:

<form name="form" class="form-horizontal" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>

My submit function that clears the form after submit

submit(): void {
    // my submit code....

    // reset form
    this.f.resetForm();

    // After the reset, the selects will be cleared to nulls
    // even setting the model values back to '' or 0 does not rebind them. (seems like a bug)
    // but setting the form values back manually works.
    this.f.form.controls.schoolid.setValue('');  // <--- Here is resetting a select back to a default '' value
    this.f.form.controls.active.setValue(true);
    this.f.form.controls.roleid.setValue(0);  // <-- Here is resetting a select back to a default 0 value
    this.f.form.controls.radioGender.setValue("M");
}