Angular Reactive Form Select dropdown has an empty option

1
votes

I'm having a reactive form with dropdowns. I'm showing user's selected dropdown items in the form. Values are getting from API. There are several drop-downs are generating and in every dropdown there's an empty option(blank item). But from the API side ,there are no blank items are coming. This is what I tried. Can someone help to solve this issue

View.

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

This is how items are getting and added to reactive form

 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],
    })
  }
2
angularangular-reactive-formsreactive-forms
I'm having the exact same problem. I can load the values from the API and patch a default selected value, but the list contains a blank "null" value in the bottom. - Jeppe
Seems to work if there is some <option> - Adding <option disabled>Choose</option> before my *ngFor doesn't produce the error. (Angular 8.2.12) - Jeppe

2 Answers

0
votes

I think you can solve it with 2 options:

a. Use Reactive Forms Validations to make sure the control is not empty.

b. Add a selected attribute to a default value, let say, the first one:

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

If you want to generate <option> items within an <select> dropdown, you will have to loop over the options. Passing an array to [ngValue] will most likely not work.

Maybe you can fork this stackblitz so that it shows your problem better.

Example of generating options for a dropdown without an empty option:

<!-- 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
    }
  ];
}