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

Posted 2023-02-22

【中文标题】设置默认值以使用反应形式进行选择

【英文标题】：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

来实现

【参考方案1】：

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

试试这样：

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