Angular select option shows blank when assigned from array

by

I want to show my strings array in select dropdown. I tried the normal way :

<form [formGroup]="emailForm" #form="ngForm" (ngSubmit)="sendEmail()" novalidate class="tooltip-center-bottom">
  <div class="form-group">
    <select id="emailTem" class="form-control" formControlName="emailTem" [(ngModel)]="emailTem">
      <option value="" disabled selected>Select Email Template</option>
      <option *ngFor="let obj of emailArray" [ngValue]="obj">{{obj}}</option>    
    </select>
    <div *ngIf="statusForm.get('status').errors?.required && form.submitted" class="invalid-tooltip">Status is required!</div>
  </div>
  <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

The array i have assigned :

emailArray: string[] = [
    'Call Not Connected',
    'Refund'
];

it was working before normal. But now it’s not showing blank

dropdown

if i try with normal by setting values directly like this : <option value="New" ng-reflect-value="New">New</option> it works properly

Even stackbliz not working

26 thoughts on “Angular select option shows blank when assigned from array”

  1. <form #form="ngForm" (ngSubmit)="sendEmail()" class="tooltip-center-bottom">
  <div class="form-group">
    <select id="emailTem" class="form-control" name="email" [(ngModel)]="emailTem">
      <option value="" disabled selected>Select Email Template</option>
      <option *ngFor="let obj of emailArray" [value]="obj">{{obj}}</option>    
    </select>
  </div>
  <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>
    Reply

  2. You had a typo get(’email’):

    <div *ngIf="emailForm.get('email').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>

    Should be get(’emailTem’):

    <div *ngIf="emailForm.get('emailTem').errors?.required && form.submitted" class="invalid-tooltip">Status is
            required!</div>
    Reply

  3. Please try with…

    .html file

    <form [formGroup]="emailForm" #form="ngForm" (ngSubmit)="sendEmail()" novalidate class="tooltip-center-bottom">
<div class="form-group">
    <select id="emailTem" class="form-control" formControlName="emailTem" >
  <option value="" disabled selected>Select Email Template</option>
  <option *ngFor="let obj of emailArray" [ngValue]="obj">{{obj}}</option>
</select>
    <!-- <div *ngIf="emailForm.get('email').errors?.required && form.submitted" class="invalid-tooltip">Status is
        required!</div> -->
</div>
<button class="btn btn-primary status-button" type="submit">Submit</button>

    there is problem with validation So remove or comment that part and it will work fine
    Soluation
    hope it will work fine !

    Reply

Leave a Comment