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

【问题标题】：Set default value to select with reactive forms设置默认值以使用反应形式进行选择
【发布时间】：2020-01-15 00:01:44
【问题描述】：

我有一些这样的功能：

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();

用表单清除所有值，甚至没有显示第一个，因为我使用的第一个选项就像占位符

它应该是这样的

这就是它的作用

【问题讨论】：

只需在[value]="'Your default value'"之类的第一个选项上添加值属性并删除选定的属性
我不知道角度，但在 jquery 中我们可以通过遵循 link 来实现

标签： angular angular-reactive-forms

【解决方案1】：

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

试试这样：

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

【讨论】：