如何重置选择默认值Angular2

我有一个选择第一个选项作为硬编码只是为了显示占位符和对象列表,点击清除我需要重置选择到第一个选项,我不能在这里做,有没有办法??

<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)]一个值而不是“”
>我甚至添加了一个标志并尝试将其分配给
[选中]它不起作用

有没有其他方法除了使这个字典和第一个对象添加到其中,并设置禁用属性作为它的标志？,这就是我现在正在计划的.

其他SO问题对我没有帮助

我不确定你是如何重置你的表单的,但我也很难将重置选择回到Angular 2中的默认值.但是我已经使用了一些自定义的值设置.在我的场景中,我使用0作为我的选择的默认值,但我尝试”它也可以.我用下面的空字符串默认换出了我的0默认值.请注意,我没有使用绑定[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");
}

原文地址：https://www.jb51.cc/angularjs/141198.html

如何重置选择默认值Angular2

相关推荐