I am currently working on a search form and want to incorporate it within an accordion so that users can simply click to expand the form. Below is the code snippet:
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>
Can someone guide me on how to set up an accordion that will contain this form within it?