Angular select option shows blank when assigned from array

Question

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

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

Why do you use reactive form and template driven form together? I think you can remove #form="ngForm". Please check emailArray object in the console.log() on the ts. — oz1985oz
– oz1985oz, Commented Feb 17, 2021 at 5:10
@oz1985oz i usually don't work as frontend developer and new to angular framework but i read it helps to assign values retrived from api and formcontrol help me to set validator for control — Ashish
– Ashish, Commented Feb 17, 2021 at 5:13
it's printing properly. i just printed the with normal stringify — Ashish
– Ashish, Commented Feb 17, 2021 at 5:16
They both (reactive form and template driven form) are the same. They contain the same information / methods. The main difference is template driven form is mostly on HTML and reactive form is mostly on ts. — oz1985oz
– oz1985oz, Commented Feb 17, 2021 at 5:19
@oz1985oz does it affect my select option because i was using before and it was working great. But when i tried to update the page. It stopped working — Ashish
– Ashish, Commented Feb 17, 2021 at 5:20

Akhil Korissery · Accepted Answer · 2021-02-17 05:34:56Z

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>

edited Feb 17, 2021 at 5:34

answered Feb 17, 2021 at 5:04

Akhil Korissery

581 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akhil Korissery Over a year ago

<select id="emailTem" class="form-control" formControlName="emailTem" [(ngModel)]="emailTem"> What is the need of using both the formControlName and [(ngModel)]. You are trying to use both the template driven and reactive form . Please remove [(ngModel)].

Ashish Over a year ago

I am not a frontend developer but i assigned values retrieved from api.

Ashish Over a year ago

Somehow it worked on stackbliz but not on my computer

Dako patel · Accepted Answer · 2021-02-17 05:41:37Z

1

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 !

edited Feb 17, 2021 at 5:41

answered Feb 17, 2021 at 5:15

Dako patel

9306 silver badges15 bronze badges

6 Comments

Ashish Over a year ago

Nope it's not working same output just blank options

Dako patel Over a year ago

@Ashish Okay give me 2 min

Dako patel Over a year ago

@Ashish remove all [(ngModel)] inside <form> tag

Ashish Over a year ago

Not working please check my stackbliz i added so other can contribute

Dako patel Over a year ago

@Ashish please check updated answer there is problem with your code

|

Benny Halperin · Accepted Answer · 2021-02-17 05:47:24Z

0

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>

answered Feb 17, 2021 at 5:47

Benny Halperin

2,3723 gold badges16 silver badges22 bronze badges

2 Comments

Ashish Over a year ago

But it doesn't solve my problem. My main problem was it didn't show my list

Benny Halperin Over a year ago

Did you change it as above and it still didn't work? I found it out in your Stackblitz. With the typo there is an error in the console and from then on things break

Pinaki · Accepted Answer · 2021-02-17 06:42:13Z

Try this Angular Reactive form with validation and get value on submit -

app.component.html -

<form [formGroup]="emailForm" (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" [value]="obj">{{obj}}</option>    
    </select>
        <br><br>
        <div *ngIf="formSubmit && emailTem.errors">
            <div class="text-danger" *ngIf="emailTem.errors.required">Status is required!</div>
        </div>
        <br>
    </div>
        <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

app.component.ts -

import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";

export class AppComponent {
    emailForm: FormGroup;
    formSubmit: boolean = false;
    emailArray: string[] = ["Call Not Connected", "Refund"];

    ngOnInit(): void {
        this.emailForm = new FormGroup({
          emailTem: new FormControl("", [Validators.required])
        });
    }

    sendEmail() {
        this.formSubmit = true;
        if(this.emailForm.valid){
            console.log(this.emailForm.value.emailTem); // selected value
        }
    }

    get emailTem() {
        return this.emailForm.get("emailTem");
    }
}

app.module.ts -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Example -

Collectives™ on Stack Overflow

Angular select option shows blank when assigned from array

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related