CODEWITHSUNDEEP
htmlformsangularprimengtoolstripdropdown
curious_debugger
curious_debugger

Reputation: 329

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

Upvotes: 2

Views: 19301

Answers (4)

TODO
TODO

Reputation: 35

I was not able to make any of the above examples work. In our situation, we require screen readers to mention "required" fields. The p-dropdown was problematic and their docs do not even have a required example in the accessibility section for our version. I used the ariaLabelledBy to inject the word "required" after the placeholder text. The screen readers just read information, and this worked to let them know it's required in our situation. Maybe it will work for you too!

       <span id="required" class="sr-only">required</span>
        <p-dropdown
          class="dropDownValues"
          [options]="optionsArray"
          formControlName="myDropdown"
          placeholder="Select an option"
          ariaLabelledBy="requiredSR"
        >
       </p-dropdown>

Upvotes: 0

S C
S C

Reputation: 61

Try

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

Upvotes: 6

naveen kumar
naveen kumar

Reputation: 21

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.

Upvotes: 2

BillF
BillF

Reputation: 864

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

Upvotes: -1

Related Questions