How to Reset Choose a default value of Angular2

Question

I have a choice with the first option, as one jsut is hardcoded to show the owner of the place and the list of objects, when I click the clear button, I need to reset to select the first option, I can not do it 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

• Reset data source and its purpose
• Assign value instead of "" in [(ngmodel)]
• I even added a flag and tried to assign it to [selected] it does not work

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

Other SO questions didn't help me

Answer 1

I'm not quite sure how you reset your form, but I struggled with resetting the settings back to the default value in Angular 2. However, I got it to work with some custom value settings. In my script, I use 0 as the default value for my choice, but I tried, '' and it also works. I replaced my default 0 with my empty default line below. Note that I did not use the [value] binding, but just a regular value and only single quotes, not double quotes, like you do.

 <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 my form into my component.ts file using ViewChild:

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

Define the form of the variable in the component:

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

My form tag in an HTML template looks like this:

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

My submit function, which deletes 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"); }