Блог

Я создаю многоступенчатую форму на ионном языке для отправки информации о лекарствах.

Раньше это была одна большая форма, но я хочу, чтобы она выглядела немного менее загроможденной и длинной. Я использую ion-slides для моделирования формы, и я хочу иметь возможность сделать один из слайдов доступным только при нажатии кнопки. Как я могу это сделать? Пока это мой код:

 <ion-content>
    <ion-slides>
        <ion-slide>
            <h4>Tell us about your medication</h4>
        </ion-slide>
        <ion-slide>
            <form id="addMed" #form="ngForm" (ngSubmit)="addMed(form)">
                       ```
                       some code
                        ```
            </form>
        </ion-slide>
        <ion-slide>
            <form>
                       ```
                       some code
                        ```
                <ion-button expand="full" (click)="toggleRX()">This is a prescription medication</ion-button>
                    <div *ngIf=isRX>
                        <h4>Prescription Information</h4>

                       ```
                       some code
                        ```
                    </div>
            </form>
        </ion-slide>
    </ion-slides>
  

Я хочу, чтобы div * ngIf был отдельным слайдом, но доступным только в том случае, если нажата кнопка «это лекарство, отпускаемое по рецепту». Есть ли способ сделать это?

(Я также хочу узнать больше об ion-слайдах с формами, если у кого-нибудь есть какие-либо ресурсы по этому вопросу, но это просто бонус)

Мы можем заблокировать переход к следующему слайду, если не нажата наша предписанная кнопка, после нажатия мы перейдем к любому слайду #, который мы хотим — и как только слайд будет переведен, мы снова заблокируем возможность перехода к слайду (чтобы пользователь не переходил к нему самостоятельно — единственный способ для них перейти к другому слайду — только с помощью кнопки)

Проверьте домашнюю вкладку в демо-версии stackblitz здесь

home.ts читается как:

 import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  slideOpts;
  constructor(public navCtrl: NavController) {
    this.slideOpts = {
      effect: 'flip'
    };
  }

  ionViewDidEnter() {
    //lock manual swipe for main slider
    this.slides.lockSwipeToNext(true);
    this.slides.lockSwipeToPrev(true);
  }

  slideToSlide() {
    if (this.slides.getActiveIndex()   1 === this.slides.length()) {
      this.slides.slideTo(0);
    } else {
      this.slides.lockSwipeToNext(false);
      this.slides.slideTo(this.slides.getActiveIndex()   1);
      this.slides.lockSwipeToNext(true);

    }
  }

}
  

home.html это:

 <ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-slides>
        <ion-slide>
            <h4>This is the first slide</h4>
            <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the second slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
        <ion-slide>
            <h4>This is the third slide</h4>
      <button type="button" (click)="slideToSlide()">Next</button>
        </ion-slide>
    </ion-slides>
</ion-content>