angular - Angular Reactive forms - 如何设置数据列表的默认值并仍然在下拉列表中看到整个列表？

Question

我正在尝试在Angular中以反应形式使用数据列表，因为如果它不在列表中，我希望用户添加一个选项。我想用我拥有的数据设置默认值，所以我使用 formControl 来设置它，如下所示：

category: new FormControl(myCategory, [Validators.required])

但是当我设置值时，它只在下拉列表中显示一个值，而如果我设置一个空字符串而不是“myCategory”，我会得到整个列表。

在这里你可以看到值集会发生什么

这是完整列表，但没有设置值

这是我的表格：

<label for="category">Category</label>
            <input id="category" list="categories" class="form-control" formControlName="category">
            <datalist id="categories">
              <option *ngFor="let category of this.categoriesList" [value]="category">{{category}}</option>
            </datalist>

如何设置默认值并仍然在下拉列表中看到整个列表？有没有简单的方法来做到这一点？感谢您的帮助。

标签： angularangular-reactive-formsreactive-formshtml-datalist