angular - 如何将选择重置为默认值Angular2

Question

我有一个带有第一个选项的选择作为硬编码选项，只是为了显示占位符和对象列表，单击清除后我需要将选择重置为第一个选项，我在这里无法做到这一点，是有办法吗？？

<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>

我试过了

  this.ddlFileId = "";

我的尝试

• 将数据源清空并重新赋值
• 给 [(ngmodel)] 一个值而不是 ""
• 我什至添加了一个标志并试图将它分配给[selected] 还是不行

除了将其设为字典并将第一个对象添加到其中并将禁用属性设置为它的标志外，还有其他方法吗？这就是我现在的计划。

其他SO问题对我没有帮助

Answer 1

我不确定您是如何重置表单的，但我也一直在努力将 Angular 2 中的选择重置回默认值。但是我已经让它可以使用一些自定义的值设置。在我的场景中，我使用 0 作为我选择的默认值，但我尝试了 '' 并且它也能正常工作。我用下面的空字符串默认值换掉了我的 0 默认值。请注意，我没有使用绑定(bind) [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>

我使用 ViewChild 将我的表单拉入我的 component.ts 文件:

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

将表单设置为组件中的变量:

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

我在 HTML 模板中的表单标签如下所示:

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

提交后清除表单的提交函数

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");
}