[英]how to Reset Select to default value Angular2
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 我的尝试
""
to [(ngmodel)]
给[(ngmodel)]
一个值而不是""
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. 除了将其设置为字典并向其添加第一个对象(通过将disable属性设置为标志)之外,还有其他方法吗?那就是iam现在正在计划的事情。
Other SO questions didn't help me 其他的问题对我没有帮助
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. 我不确定您如何重置表单,但是我也一直在努力将选区重置为Angular 2中的默认值。 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. 在我的场景中,我将0用作选择的默认值,但是我尝试了“”,它也可以正常工作。 I swapped out my 0 default with your empty string default below. 我用下面的空字符串替换了我的0默认值。 Note that I didn't use the binding [value] but just a regular value and only single quotes, not double quotes as you did. 请注意,我没有使用绑定[value],而是仅使用常规值和仅单引号,而不是像您一样使用双引号。
<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: 我使用ViewChild将表单拉入component.ts文件:
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: HTML模板中的表单标签如下所示:
<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");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.