Angular select option shows blank when assigned from array

user_10182897 0
Viewed 992

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

angular html javascript
4 Answers
<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>
user_83823880

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 !

user_141234060

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

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 -

angular-reactive-form

user_36937630
Related