Question

我有一个具有此下拉多选功能的表单，并且我希望能够在单击 Submit （提交）按钮时隐藏选项面板。谁能告诉我我想念的东西吗？提前非常感谢！

[！[在此处输入图片描述] [1]] [1]

这是我的代码：

<p-multiSelect [options]="registrationStatus" [defaultLabel]="someText" [showHeader]="false"></p-multiSelect>

LIVE DEMO

Answer 1

您使用选择框的引用并根据需要显示和隐藏-

<form>
   <p-multiSelect #status (click)="status.show()" [options]="registrationStatus" [defaultLabel]="someText" [showHeader]="false"></p-multiSelect><br/><br/><br/><br/><br/><br/><br/>

   <button (click)="status.hide()">Submit2</button>
</form>

工作副本在这里-https://stackblitz.com/edit/primeng-input-multiselect-hjq2qf

这是另一个版本-https://stackblitz.com/edit/primeng-input-multiselect-bzip3o

Answer 2

您需要使用hidden属性。将隐藏属性添加到多选标签。

<p-multiSelect [hidden]="hidePanel" [options]="registrationStatus" [defaultLabel]="someText" [showHeader]="false">

现在，您需要将hidePanel设置为true，以便应用hidden属性。因此，单击提交时：

hidePanel: boolean = false;

hideOptionsPanel() {
  //How to hide options panel
  alert("Let's hide options panel");
  this.hidePanel = true;
}

demo

Answer 3

实际上，我对Sunil的回答没有足够的意见。所以，我在这里写。您需要将这些内容添加到ts文件中。

@ViewChild('status') status;
hideOptionsPanel(){
 //How to hide options panel
 this.status.hide();
}

和您的.html文件中

<button (click)="hideOptionsPanel()">Submit2</button>

提交表格时如何隐藏选项面板？

3 个答案: