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

【问题标题】：Set default value of dropdown in Angular 6在 Angular 6 中设置下拉菜单的默认值
【发布时间】：2019-09-25 23:55:34
【问题描述】：

我正在使用服务填充 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>

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

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

【问题讨论】：

什么图片？什么不工作？
@ritaj - 抱歉我错过了图片，我再次更新了我的问题
你可以试试这个[Validators.required, Validators.min(1)]

标签： angular dropdown angular7

【解决方案1】：

这对我有用

<option [ngValue]="null" selected disabled>Select Supplier</option>

【讨论】：

【解决方案2】：

<select class="form-control" [(ngModel)]="someList.key" name="key"  #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>

为我工作！

【讨论】：

【解决方案3】：

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

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

supplierId 总是大于零，所以 min(1) 适合你。

【讨论】：

是的，通过组合是，通过组合和 [validators.min(1)] 它的工作。我不需要在 TS 文件中设置任何额外的变量来在页面加载时默认显示 Selected 选项。
另外，我认为我不需要validatiors.required，对吗？

【解决方案4】：

在您的 component.html 文件中包含以下代码

  <option [value] = "defaultValue">0:(optional_value)</option>

在您的 component.ts 文件中包含以下代码。

this.myFormGroup.setValue({
supplierId: defaultValue, 
});

【讨论】：

【解决方案5】：

试试这个，为我工作。

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

【讨论】：

在TS中设置默认值为selected

【解决方案6】：

您需要设置来自formControlName的值

这里是例子

this.myFormGroup.setValue({
  supplierId: myValue1, 
});

【讨论】：

【解决方案7】：

您可以通过setValue进行设置

ngOnInit(){
   let defaultId = 1;
   this.yourForm.controls['supplierId'].setValue(defaultId);
}

【讨论】：

【解决方案8】：

您可以将默认值设置为0 作为默认选项。（0只是一个例子，你可以有任何默认值）

<option value="0">Select Supplier</option>

当您为下拉菜单创建表单控件时，使用默认值对其进行初始化。

// wharever your form name is, this is just an example
this.form = this._formBuilder.group({  
    .....
    supplierId: [0]  // initialize the control with the default value
    ....
})

【讨论】：

我已经更新了我的问题，如果我将默认选项的值设置为 0，如果我选择默认选项，必填字段验证将不起作用
@UbiquitousDevelopers 您可以遵循@Paresh 的建议，也可以设置默认选项，例如：<option value="">Select Supplier</option> 和您的控件，例如：supplierId: ["", [Validators.required]],
是的，通过结合和 [validators.min(1)] 它的工作
@UbiquitousDevelopers 没有min(1) 验证器就不行吗？因为您默认情况下没有设置任何值。它是一个空字符串
如果我不设置任何值，默认取0，所以min(1)有效