Angular Reactive Form Select 下拉菜单有一个空选项答案

【问题标题】：Angular Reactive Form Select dropdown has an empty optionAngular Reactive Form Select 下拉菜单有一个空选项
【发布时间】：2019-09-15 08:32:29
【问题描述】：

我有一个带有下拉菜单的反应式表单。我在表单中显示用户选择的下拉项目。值来自 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],
    })
  }

【问题讨论】：

我遇到了完全相同的问题。我可以从 API 加载值并修补默认选定值，但列表底部包含一个空白的“null”值。
如果有 some <option> 似乎可以工作 - 在我的 *ngFor 之前添加 <option disabled>Choose</option> 不会产生错误。（角度 8.2.12）

标签： angular angular-reactive-forms reactive-forms

【解决方案1】：

我认为您可以通过 2 个选项来解决它：

一个。使用响应式表单验证来确保控件不是空。

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

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

【讨论】：

我这里给出了2个解决方案，哪一个？
亲爱的兄弟请先理解我的问题。在我的问题中，我提到下拉值来自 API ，但还有一个额外的空值。我想摆脱它。

【解决方案2】：

如果您想在 <select> 下拉列表中生成 <option> 项目，则必须循环选项。将数组传递给[ngValue] 很可能不起作用。

也许你可以 fork 这个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
    }
  ];
}

【讨论】：