Angular2 - Displaying values in a Select item

Question

I'm pretty new to Angular/WebDev (I come from a mobile background), so do bear with me here...

I'm trying to display state abbreviations in a "Select" menu item. I have a client-detail-componenet.ts file, which is where I have an array of the state abbreviations:

export class ClientDetailComponent implements OnInit, OnDestroy {
private showDebugInfo: boolean;
private clientDataFG: FormGroup;
private clientDataFGFormVal: AppFormValidationResult;
private brapClient: BrapClient;

//TODO - this should be created somewhere else...
states = ['AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FM', 'FL', 'GA', 'GU', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MH', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'MP', 'OH', 'OK', 'OR', 'PW', 'PA', 'PR', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VI', 'VA', 'WA', 'WV', 'WI', 'WY'];
...
}

In the corresponding HTML file, I have the following code where I intend to put a dropdown selector inside of a form:

            <div class="field-area">

                <label for="state" class="text-center">State</label>
                <!--<div class="field state">
                    <input type="text" id="addressState" class="form-control" formControlName="addressState">
                </div>-->

                <select class="form-control" formControlName="state">
                  <option *ngFor="let state of states" [value]="state">{{states}}</option>
                </select>
              </div>

Some part of this is incorrect, as when I run the project and look at the menu, no option-values are shown in the selector. Can anyone help me understand what I need to do? Thanks!

EDIT As Alexander pointed out, there was a typo in the HTML file...the corrected line is below:

<option *ngFor="let state of states" [value]="state">{{state}}</option>

However, I'm still not seeing any values show up in the selector:

EDIT 2

This is where the form group + it's elements are created:

// This creates the initial form for the page, as well as the validation objects.
createForm() {
    this.clientDataFG = this.fb.group({
        firstName: [null, Validators.required],
        lastName: [null, Validators.required],
        emailAddress: [null],
        homePhone: [null],
        addressStreet1: [null],
        addressCity: [null],
        addressState: [null],
        addressZip: [null],
        weight: [null],
        height: [null],
        riderType: [null],
        clientBikes: this.fb.array([]), // <-- clientBikes is as an empty FormArray

    });

Are you initializing each from FormControl, including state, via something like FormBuilder? — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 10, 2017 at 18:19
As you can see in this plunk: embed.plnkr.co/s2quKKVhsYm0NTL6k9Ib, there are no errors in the *ngFor syntax, so the problem lies elsewhere. Try including your FormControl code + CSS and maybe we can better help. — LarsMonty
– LarsMonty, Commented Aug 10, 2017 at 18:21
@AlexanderStaroselsky thanks; that makes sense - I added another edit to the question w/that code — narner
– narner, Commented Aug 10, 2017 at 18:24
You are initializing a FormControl identified as addressState, but are using state in the template. Try changing to formControlName="addressState". See my updated answer. — Alexander Staroselsky
– Alexander Staroselsky, Commented Aug 10, 2017 at 18:26

Alexander Staroselsky · Accepted Answer · 2017-08-10 18:33:17Z

3

In <option *ngFor="let state of states" [value]="state">{{states}}</option> you have {{states}} with a trailing "s" character rather than just {{state}}.

Try removing the trailing "s" to display/target the current iteration's state string value.

<option *ngFor="let state of states" [value]="state">{{state}}</option>

Make sure you are initializing each FormControl via something like FormBuilder in the constructor:

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

export class ClientDetailComponent implements OnInit, OnDestroy {
    states: string[] = ['AL'];

    constructor(private fb: FormBuilder) {
        this.clientDataFG = this.fb.group({
            state: 'AL'
        });
    }
}

You are initializing a FormControl identified as addressState, but are using state in the template. Try changing formControlName="state" to formControlName="addressState".

<select class="form-control" formControlName="addressState">
    <option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>

Hopefully that helps!

edited Aug 10, 2017 at 18:33

answered Aug 10, 2017 at 18:05

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

1 Comment

narner Over a year ago

Hey Alexander, thanks for the typo catch - it's still behaving weird. I'll update my answer though (with a screenshot and this typo fix).

Collectives™ on Stack Overflow

Angular2 - Displaying values in a Select item

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related