Question

我正在使用角度的反应形式，我有一个下拉列表。请参阅plunk here

见下面的代码。

<select class="form-control" id="contry" formControlName="country">
    <option *ngFor="let contry of countries" [value]="contry.id">{{contry.name}}</option>
</select>

此处我无法显示默认选定值。它总是在下拉列表中显示一个空白的默认值。它在模板驱动的表单中运行良好。而且我也知道通过使用

可以以反应形式实现

form.setValue 或 form.patchValue

有没有更好的方法可以在我的控制器中没有设置任何表格值的情况下实现这一目标？

Answer 1

在表单初始化中，只需将默认值添加到表单控件

this.myForm = this._fb.group({
     country: this._fb.control(1)
});

显然，您可以使用默认值的ID

更改1

Answer 2

试试这个

this.myForm = this._fb.group({
        country:this.countries[0]
});

并在模板中

<option *ngFor="let contry of countries" [value]="contry">{{contry.name}}</option>

设置formcontrol的默认值，并在模板中，将value属性与整个contry对象绑定，因为您将完整对象指向.ts文件

Answer 3

使用如下所示的patchValue，您可以选择默认值

在您的component.ts中

  this.yourForm.patchValue({
      CategoryID:1
    });

Angular - Reactive Form - 下拉列表中的默认选定值

3 个答案: