required attribute not working with primeng <p-dropdown>

Question

I am working on a angular2 App and I am using primeng for UI elements. I have dropdowns where I am using the options in these dropdowns are dynamically generated from an API call. Now, when I click the submit button, I want it to validate the forms before submitting. So I am using 'required="required"' in order to make the validation happen.

I see that, if the data is not loaded into the dropdowns, the validation works fine, but when the data is loaded and dropdown options are populated, the primeng validation breaks and it does not throw any message.

Here's my html code..

<div method="post" class="content-form">
                            <div class="col-lg-6">
                                <form  #myForm="ngForm" class="form-horizontal" novalidate>
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 control-label">System of Origin</label>
                                        <div class="col-sm-10">
                                          <p-dropdown class="contentDetails" [options]="systemOfOrigins" [(ngModel)]="defaultSoO" [ngModelOptions]="{standalone: true}"   required="required" filter="filter" placeholder="NONE"></p-dropdown>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-2 control-label">Content Type</label>
                                        <div class="col-sm-10">
                                          <p-dropdown  class="contentDetails" [options]="contentTypes" [(ngModel)]="selectedContentType" [ngModelOptions]="{standalone: true}"  filter="filter"  required="required" placeholder="Choose"></p-dropdown>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">Rendition</label>
                                        <div class="col-sm-10">
                                         <p-dropdown id ="rendition"  placeholder="Select Rendition" class="contentDetails" [options]="renditions" [(ngModel)]="renditionSelected" [ngModelOptions]="{standalone: true}"  filter="filter" required="required"></p-dropdown>
                                        </div>

                                    </div>
                             </form>

Am I not using the required attribute properly or is there any other way to do it with API calls ? Help is appreciated

Answer 1

This issue happens if there is a dummy first element in the options array that is used to display please select text, and the label in that dummy element is having some value in it. So just set the label value as '' or null or undefined. It will work.