在 Angular 6 中设置下拉菜单的默认值

Question

我正在使用服务填充 DropDown。服务返回简单的键/值对数组。

打字稿：

public initializeForm(): void {
        this.form = this.fb.group({
            supplierId: ["", [Validators.required]],
            username: ["", Validators.required],
            credentials: ["", [Validators.required]],
            rating: [""]
        })
    }


this.adminService.getSuppliers({ active: "true" }).subscribe(res => {
    this.suppliers = res;
})

HTML：

<select class="form-control" formControlName="supplierId">
     <option>Select Supplier</option>
     <option *ngFor="let s of suppliers" [value]="s.supplierId">{{s.supplierName}}</option>
</select>

如下图所示，默认选项未设置为页面加载时的选定选项。我希望在页面加载时选择默认选项，就像简单的 HTML 一样，并在我尝试通过在下拉列表中选择默认选项来提交页面时触发所需的字段验证

更新：
如果我将默认选项值设置为 0，它不支持必需的验证，如果我选择默认选项，则认为它有效

Answer 1

将validation.min 设置为required 以及如下所示。

supplierId: ["", [Validators.required, Validators.min(1)]]

supplyId 始终大于零，因此 min(1) 适合您。