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

标签 angular dropdown angular7

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

typescript :

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>

As you can see in below image, default option is not set as selected option on page load. I want default option to be selected on page load same like simple HTML and fires required field validation when I try to submit page by selecting default option in dropdown



enter image description here

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

最佳答案

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

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

supplierId is always greater zero so min(1) works for you.

关于angular - 在 Angular 6 中设置下拉菜单的默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56037515/

相关文章:

angular - 用 Angular2 编写的单页应用程序加载速度慢吗?

html - 如何在 Angular 中显示下拉列表以从 MySQL 表中选择一项?

Jenkins 参数化构建以使用键/值对

html - 尝试正确设置下拉菜单

angular - 将 Angular 7 升级到 8,错误 : this. typeChecker.getTypeArguments 不是构建库上的函数

java - 已被 CORS 策略阻止 : Response to preflight request doesn't pass

css - 如何在 ionic4 中设置平台特定的 css(android 和 ios 的不同样式)

angular - 如何在 HTML 模板中使用作为@Input 传递的管道

javascript - 从另一个 HTML 元素获取值

angularjs - 在 Angular2 中将 Webpack 与 SASS 和 PostCSS 结合使用