2

I'm new to ionic and working on Ionic 4. I want to open a Modal page on a select tag. But currently, it opens a default dialog with blank values and Cancels/OK buttons. I want to remove this dialog and just show a Modal. To open a Modal I used (click) option in HTML. But how to remove this default dialog? I found this link which shows how to change function but I did not understand how to implement in mine. 

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

4

1 回答 1

0

您可以尝试使用此 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;
  }
于 2018-08-17T08:33:39.477 回答