如何在Ionic 3中用手风琴打开此表格？

Question

We are building a search form and trying to implement it inside accordion so the user can click it to open the form. Here is the code:

TS.

buildForm(): void {
    this.form = this.fb.group({
      username: new FormControl(''),
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      agefrom: new FormControl(''),
      ageto: new FormControl(''),
      country: new FormControl(''),

    });
  }

HTML

<ion-list>
    <form  [formGroup]="form">
        <ion-list style="margin-top: 15% !important" class="scroll">
          <ion-item>
              <ion-input class="input-field" formControlName="firstName" name="firstName" type="text" placeholder="First Name"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input class="input-field" formControlName="lastName" name="lastName" type="text" placeholder="Last Name"></ion-input>
              </ion-item>
          <ion-item>
           <ion-select interface="action-sheet" class="select" placeholder="Country">
              <ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}}
              </ion-option>
            </ion-select>
           </ion-item>    
                <button ion-button block class="search">Sign Up</button>                
        </ion-list>
    </form>
   </ion-list>

How to create an accordion which will include this form inside of it?

Answer 1

so you need to create your own accordion. I have created a small example to demonstrate how an accordion can be achieved.

https://stackblitz.com/edit/ionic-accordion

You can further apply css animations to make it look and feel better.

Please, upvote if this helps!