Question

我的反应形式带有下拉菜单。我在表格中显示用户选择的下拉菜单项。价值来自API。有几个下拉列表正在生成，并且在每个下拉列表中都有一个空选项（空白项目）。但是从API方面来看，没有空白项目来了。这就是我尝试过的。有人可以解决这个问题吗？

查看。

<form [formGroup]="feedbackForm" (ngSubmit)="onSubmit()">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Category</th>
                    <th scope="col">Option</th>
                </tr>
            </thead>
            <tbody>
                <tr formArrayName="arr" *ngFor="let item of feedbackForm.get('arr').controls; let j = index">
                    <ng-container [formGroupName]="j">
                        <td>{{item.value.categories}}</td>
                            <!--Dropdown items are generating from API-->
                        <td>
                            <select name="apivalues" formControlName="option">
                                <option  [ngValue]="item.value.categories">{{item.value.categories}}
                                <option>
                            </select>
                        </td>
                    </ng-container>
                </tr>

            </tbody>
        </table>

这是物品获取并添加到反应形式的方式

 getOptionsFromAPI() {
    this.apiService.getOptions()
      .subscribe(res=> {

        this.arr = this.feedbackForm.get('arr') as FormArray;

        if (res['data'].length > 0) {
          for (let i = 0; i < res['data'].length; i++) {
            this.category = "";
            this.getOptions= response['data'][i].options;
            this.category = response['data'][i].categories

            this.arr.push(this.createItems());
          }
        }
      }, 

      error => {


      });
  }


  createItem() {
    return this.fb.group({
      category: [this.category],
      options: [this.getOptions],
    })
  }

Answer 1

我认为您可以通过以下两种方法解决此问题：

a。使用反应性表单验证来确保控件不是空的。

b。将selected属性添加到默认值，比方说第一个：

<option *ngFor="let option of options; let i = index" [value]="option.key" [selected]="i === 0">{{option.value}}</option>

Answer 2

如果您想在<option>下拉列表中生成<select>个项目，则必须遍历这些选项。将数组传递给[ngValue]很可能行不通。

也许您可以分叉此stackblitz，以便更好地显示您的问题。

为没有空选项的下拉菜单生成选项的示例：

<!-- app.component.html -->
<form [formGroup]="form"> 
  <select name="cars" formControlName="cars">
    <!--option value="0"></option--> <!-- This would be an empty option -->
    <option *ngFor="let option of options" [value]="option.value">
      {{option.label}}
    </option>
  </select>
</form>

export class AppComponent  {
  carControl = new FormControl(1);

  form = new FormGroup({
    cars: this.carControl
  });

  name = 'Angular';

  options = [
    {
      label: 'Car BMW',
      value: 1
    },
    {
      label: 'Car Audi',
      value: 2
    },
    {
      label: 'Car VW',
      value: 3
    }
  ];
}

Angular Reactive Form Select下拉菜单为空

2 个答案: