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

Question

我正在使用服务填充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，则它​​不支持所需的验证，并且如果我选择默认选项，则视为有效

Answer 1

设置validation.min为必填项，如下所示。

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

  

supplierId始终大于零，因此min（1）为您工作。

Answer 2

您需要从formControlName设置值

这是示例

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

Answer 3

您可以将默认选项的默认值设置为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
    ....
})

Answer 4

您可以通过setValue

进行设置

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

Answer 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>    

Answer 6

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

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

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

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

Answer 7

<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>

为我工作！

Answer 8

这对我有用

Queue.append([])