必需的属性不适用于 primeng <p-dropdown>

Question

我正在开发一个 angular2 应用程序，我正在使用 primeng 作为 UI 元素。我有一些下拉菜单，其中的选项是通过 API 调用动态生成的。现在，当我单击提交按钮时，我希望它在提交之前验证表单。所以我使用'required =“required”'来进行验证。

我发现，如果数据未加载到下拉列表中，验证工作正常，但是当加载数据并填充下拉选项时，primeng 验证会中断，并且不会抛出任何消息。

这是我的html代码..

<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>

我是否没有正确使用 required 属性，或者是否有其他方法可以通过 API 调用来做到这一点？ 感谢帮助

Answer 1

尝试

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

Answer 2

如果选项数组中有一个用于显示“请选择”文本的虚拟第一个元素，并且该虚拟元素中的标签具有某些值，则会出现此问题。因此只需将标签值设置为 '' 或 null 或 undefined 即可。会起作用的。

Answer 3

我无法使上述任何示例发挥作用。在我们的情况下，我们要求屏幕阅读器提及“必填”字段。 p-下拉菜单有问题，他们的文档甚至在我们版本的“可访问性”部分中没有必要的示例。我使用 ariaLabeledBy 在占位符文本后注入“required”一词。屏幕阅读器只是阅读信息，这可以让他们知道我们的情况需要它。也许它也适合你！

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

Answer 4

尝试将 required="required" 替换为 required="true" ，看看这是否使它们成为必需的。 如果没有，我建议添加一个plunkr