如何重置选择默认值Angular2

时间:2017-01-04 10:16:54

标签: angular

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

<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问题对我没有帮助

1 个答案:

答案 0 :(得分:3)

我不确定你是如何重置你的表单的,但我也很难将重置选择回到Angular 2中的默认值。但是我已经使用了一些自定义的值设置。在我的场景中,我使用0作为我的选择的默认值,但我尝试''它也可以。我用下面的空字符串默认换出了我的0默认值。请注意,我没有使用绑定[value],只是使用常规值而只使用单引号,而不是像你那样使用双引号。

object.size

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

library(highcharter)
data <- rnorm(100, 0, 1)
hchart(density(data), type = 'area')

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

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

HTML模板中的表单标记如下所示:

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

我的提交功能,提交后清除表单

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