CODEWITHSUNDEEP
angular
user7347942
user7347942

Reputation:

Angular 2 select dropdown not showing options

I am trying to implement a select menu in angular 2 but the dropdown is not showing anything. Here's the code for the HTML:

<form [formGroup]="weatherSelect" (ngSubmit)="onsubmit(weatherSelect)">
    <div class="form-group">
        <label for='city'>Singapore Cities</label>
        <select class="form-control" formControlName="city" id="cities">
            <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
        </select>
    </div>
</form>

Here's the typescript file, which is not completed yet:

export class AppComponent implements OnInit{

  mycities: string[]; 

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }

}

Thanks for all your help!

Upvotes: 1

Views: 1999

Answers (3)

micronyks
micronyks

Reputation: 55443

It seems that you have just initiated a ReactiveForm - learn more about ReactiveForm but you have long way to go. You need to understand many things in reactive forms.

You have a reactiveForm where FormGroup has different FormControls which are not created in your case. There are many ways to deal with Forms in (Angular2/4/5). You could probably go ahead with basic and this is,

DEMO : https://plnkr.co/edit/83dltzJmDI6mgFiam2b0?p=preview

constructor(private formBuilder: FormBuilder) { 
     this.weatherSelect = new FormGroup ({
        city: new FormControl(),
        //pincode: new FormControl('456004') // second FormControl, look at plunker
    });
  }

  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

In model-driven template, you have to create your form model first. You will have formGroup with weatherSelect and inside that there will be form control with city name

Code

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <form [formGroup]="weatherSelect" (ngSubmit)="onsubmit(weatherSelect)">
        <div class="form-group">
            <label for='city'>Singapore Cities</label>
            <select class="form-control" formControlName="city" id="cities">
                <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
            </select>
        </div>
    </form>
  `
})
export class AppComponent { 
  mycities: string[]; 
  weatherSelect: FormGroup; 
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
    this.weatherSelect = this.formBuilder.group({
      city: ''
    })
  }
}

Preview

Upvotes: 2

Nodarii
Nodarii

Reputation: 974

Please see plunker https://plnkr.co/edit/TrhHIFQfius6ZG3u48aN?p=info

@Component({
  selector: 'my-app',
  template: `
    <div>
      <form (ngSubmit)="onsubmit(weatherSelect)">
        <div class="form-group">
            <label for='city'>Singapore Cities</label>
            <select class="form-control" formControlName="city" id="cities">
                <option *ngFor="let c of mycities" [value]="c">{{c}}</option>
            </select>
        </div>
      </form>
    </div>
  `,
})
export class App implements OnInit{
  name:string;
  constructor(private formBuilder: FormBuilder) {
    this.name = `Angular! v${VERSION.full}`
  }
  ngOnInit() {
    this.mycities = ["city1", "city2", "city3"];
  }
}

EDIT: Please, note that I've remove all reactive stuff like formGroup and formControlName

Upvotes: 0

Related Questions