删除选择离子 4 中的默认对话框答案

【问题标题】：remove default dialog in select ionic 4删除选择离子 4 中的默认对话框
【发布时间】：2018-08-17 16:33:39
【问题描述】：

我是 ionic 新手，正在使用 Ionic 4。我想在选择标签上打开模态页面。但目前，它会打开一个带有空白值和取消/确定按钮的默认对话框。我想删除这个对话框，只显示一个模态。要打开模态框，我在 HTML 中使用了 (click) 选项。但是如何删除这个默认对话框呢？我发现了这个link，它显示了如何更改功能，但我不明白如何在我的中实现。

<ion-content class="main-layout" padding>
 
    <ion-row class="uploadvid-form">
      <ion-col>

        <form [formGroup]="uploadVid" (ngSubmit)="onSubmit(uploadVid.value)">
        
          <ion-list  class="ion_list_custom">
   
            <ion-item>
              <ion-label position="floating">Title</ion-label>
              <ion-input class="title" #title formControlName="title" type="text"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label position="floating">Topic</ion-label>
                <ion-select (click)="openModal()" placeholder="Search Topic" class="topic" #topic formControlName="topic" type="text">
                    
                 </ion-select>
            </ion-item>

            <ion-item>
                <ion-label position="floating">Target Community</ion-label>
                <ion-select placeholder="Select One" class="target" #target formControlName="target" type="text">
                    <ion-select-option value="f">Patients</ion-select-option>
                    <ion-select-option value="m">Doctors</ion-select-option>
                    <ion-select-option value="m">Both</ion-select-option>
                </ion-select>
            </ion-item>
   
          </ion-list>
   
        </form>
   
      </ion-col>
    </ion-row>
   
  </ion-content>

【问题讨论】：

请查看文档以使用 ionic ionicframework.com/docs/api/components/modal/ModalController 中的模态控制器
我可以打开 Modal。但是我想知道如何禁用单击选择时打开的对话框。无论如何，现在我正在使用禁用的离子输入来打开模态。我的问题现在改变了。我想要的是我的选择类“目标”具有浮动标签。现在选择的值与标签重叠。
您应该为此设计一个自定义输入，例如 select。我试过 $event.stopPropagation(); 和 $event.preventDefault(); 但两者都不起作用。

标签： angular ionic4

【解决方案1】：

您可以尝试使用此 HTML 标记来创建自定义选择。

    <div style="display: flex;overflow: hidden; max-width:45%; " (click)="openModal()" class="topic select select-md">
        <div class="select-text" [ngClass]="{'select-placeholder':selectedItem=='Select Item'}">{{selectedItem}}</div>
        <div class="select-icon">
            <div class="select-icon-inner"></div>
        </div>
        <button aria-haspopup="true" class="item-cover item-cover-md item-cover-default item-cover-default-md" ion-button="item-cover"
         type="button" aria-disabled="false">
            <span class="button-inner"></span>
            <div class="button-effect" style="transform: translate3d(23px, 67px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 490ms ease 0s, opacity 343ms ease 147ms;"></div>
        </button>
    </div>

在ts中

  selectedItem="Select Item";

  openModal(){
   /// OPEN MODAL CODE
    this.selectedItem= MODAL RETURN VALUE;
  }

【讨论】：