设置默认值以使用反应形式进行选择

时间:2019-09-13 05:59:40

标签: angular angular-reactive-forms

我有这样的功能:

cancel(): void {
  this.form.reset();
  this.router.navigate([], { queryParams: { activeOnly: false } });
}

在html中是这样的

<select class="form-control-sm" id="select-process-type" formControlName="processType">
    <option [selected]="!form.get('processType').value" disabled>
        {{'type' | translate}}
    </option>
    <option [value]="'1'" [innerHTML]="'1' | translate">
    </option>
    <option [value]="'2'" [innerHTML]="'2' | translate">
    </option>
    <option [value]="'3'" [innerHTML]="'3' | translate">
    </option>
</select>

我的问题是我打电话时

  this.form.reset();

它清除了所有形式上的价值,甚至没有显示出来,因为我使用的第一个选项就像占位符

这是它的外观

enter image description here

这就是它的作用

reactive

1 个答案:

答案 0 :(得分:1)

在默认选项中设置[value]="null"

尝试这样:

<option [selected]="!form.get('processType').value" [value]="null" disabled>
    {{'type' | translate}}
</option>