Angular Dropdown menu- reactive formatted page

Issue

I am trying to get a dropdown menu to display, but for some reason the list of options is not populating. If I display user.repList directly in the html it displays correctly, so I know the list isn’t empty. I must be calling the form incorrectly, but I dont see how. What am I doing wrong?

Model

//initializes form which contains
repList: new FormControl(this.user.repList)         

View

<form [formGroup]="editUserForm" (ngSubmit)="onSubmit()">
<label>Choose Rep</label>
<select class="form-control" formControlName="repList" required>
    <option *ngFor="let p of repList" [value]="p">{{p}}</option>
</select>
</form>

Solution

To display select dropdown, you need to loop user.repList.

<form [formGroup]="editUserForm" (ngSubmit)="onSubmit()">
<label>Choose Rep</label>
<select class="form-control" formControlName="repList" required>
    <option *ngFor="let p of user.repList" [value]="p">{{p}}</option>
</select>
</form>

FormControl needs to have default value / selected value.

repList: new FormControl(''); 

Answered By – Suresh Kumar Ariya

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.