Как открыть эту форму с гармошкой в ​​Ionic 3?

Question

Мы создаем форму поиска и пытаемся внедрить ее внутри аккордеона, чтобы пользователь мог щелкнуть по ней, чтобы открыть форму. Вот код:

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>

Как создать аккордеон, который будет включать в себя эту форму?

Answer 1

так что вам нужно создать свой аккордеон. Я создал небольшой пример, чтобы продемонстрировать, как можно достичь аккордеона.

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

Вы можете дополнительно применить анимацию CSS, чтобы она выглядела и чувствовалась лучше.

Пожалуйста, поддержите, если это поможет!