Question

我如何根据之前选择的内容获得默认值。就像我编辑某些东西并且它有一个下拉列表一样，我可以看到我之前提交的默认值，因此它不会让用户感到困惑。例如，在我的代码中，如果我单击编辑按钮，它会将我重定向到页面并启动＆＃34; patchValues（）＆＃34;功能如下，它可以从供应商列表中选择。我想要的是，如果我点击编辑按钮，我可以在选择选项

中看到默认值

TS

patchValues() {
    let suppliers = this.myForm.get('suppliers') as FormArray;
    this.material.suppliers.forEach(supplier => {
      suppliers.push(this.fb.group({
       supplier_id: supplier.name,
     }))
    })
  }

HTML

<tr *ngFor="let row of myForm.controls.suppliers.controls; let i = index" [formGroupName]="i">
            <td>
              <select formControlName="supplier_id" class="col-md-12" >
                <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
                  {{supplier.name}}
                </option>
              </select>
            </td>
   </tr>

Answer 1

你可以试试这样的事情

<form [formGroup]="test">
    <div class="col-sm-6 form-group">
        <label>Industry</label>
        <select class="form-control select" formControlName="Industry">
      <option [selected] = "true == true" [ngValue] = "0"> Please Select</option>
      <option *ngFor="let industry of industries"  [ngValue]="industry.id">{{industry.name}} </option>  
</select>
    </div>
</form>

Working Example

Answer 2

希望我能正确理解你的问题。如果该字段没有前置值，您将拥有默认选项：

<option value="">Select supplier...</option>
<option *ngFor="let supplier of suppliers"  [ngValue]="supplier.id">
  {{supplier.name}}
</option>

并且在你的patchValues中你似乎想要推送实际的id而不是名字：

this.material.suppliers.forEach(supplier => {
  suppliers.push(this.fb.group({
   supplier_id: supplier.id
 }))

现在，如果没有供应商ID，如果供应商ID为空字符串，则会选择默认选项“选择供应商...”。如果它不是空字符串，则需要相应地调整模板，例如，如果值为null，则您需要执行以下操作：

<option value="null">Select supplier...</option>

Answer 3

您可以使用private selectedSupplierId上的(change)事件跟踪变量select。您可以将其绑定到[(ngModel)]="selectedSupplierId"以在激活编辑模式时将其设置。

例如：

HTML：

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" >
    <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
          {{supplier.name}}
     </option>
</select>

TS：

private selectedSupplierId: any; //specify type if you can

private onSuppChange(value): void {
    this.selectedSupplierId = value;
}

编辑：如果你想要占位符......

<select [(ngModel)]="selectedSupplierId" (change)=onSuppChange($event.target.value) formControlName="supplier_id" class="col-md-12" >
    <option value="-1">Placeholder text..</option>
    <option *ngFor="let supplier of suppliers"  [value]="supplier.id">
          {{supplier.name}}
     </option>
</select>

在foreach patchValues()设置supplier.id = -1。{/ p>后{。}}

积分Baconbeastnz's answer

在Reactive Forms中选择选项中具有默认值

3 个答案: