'required attribute not working with primeng <p-dropdown>

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

htmlformsangularprimengtoolstripdropdown


Solution 1:[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.

Solution 2:[2]

Try

<p-dropdown [required]="true">

Solution 3:[3]

required is a boolean property. If you are setting it dynamically, [required]="isRequired", otherwise required="true" should do it for you.

Try replacing required="required" with required="true" and seeing if that makes them required. If not, I suggest adding a plunkr

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 naveen kumar
Solution 2 Bazzz
Solution 3 BillF

Related Questions