2

次のスライドに移動するには、slideNext() を使用して、各スライドにフォームを含む 4 つのスライドを含む ionic アプリを構築しています。次のスライドに移る前に各スライド フォームを検証する方法はありますか? すべてのフォーム データを送信する前に、最後のスライドでスライドの有効性を確認するために「if」ステートメントを試みますが、一部のフォームでは以前のスライドからのユーザー入力が必要なため、スライドの変更時にフォームを検証する必要があります。これどうやってするの？

4

1 に答える 1

0

フォームフィールドの有効性をチェックするこの機能があります。

    /**
     * Return boolean indicating current slides validity
     */
    public hIsCurrentSlideValid(): boolean {
        /* Use the current active slide to determine if the datafield being displayed on that slide has error checks */
        let lAnyErrorChecks = this.myForm.controls[this.hActiveSlideIndex].errors;

        /* If there are error check, ensure that error check is the required field and is active else enable the button */
        return lAnyErrorChecks ? (lAnyErrorChecks.required as boolean) : false;
    }

物事をもう少し複雑にするために、アクティブなインデックスチェックはプロミスを返すため、更新の無限ループをトリガーせずにhtmlで使用することはできません

そのため、スライドが変更されたときにスライドから Active インデックスを保存する関数を追加する必要がありました

    /**
     * Return values of current slide on change
     */
    public hCheckSlidesOnChange() {
        let lPromiseBeginSlide = this.slides.isBeginning();
        let lPromiseEndSlide = this.slides.isEnd();
        /* Get the current active slide */
        let lPromiseActiveIndex = this.slides.getActiveIndex();

        Promise.all([lPromiseBeginSlide, lPromiseEndSlide, lPromiseActiveIndex]).then((aPromiseReturn) => {
            aPromiseReturn[0]
                ? (this.disablePreviousButton = true)
                : (this.disablePreviousButton = false);
            aPromiseReturn[1] ? (this.disableNextButton = true) : (this.hSlidesDisableNextButton = false);

            /* Get the current active slide */
            this.hActiveSlideIndex = aPromiseReturn[2];
        });
    }

完全を期すために、ここに私のグローバル変数を示します。

@ViewChild("mySlides") slides;

public myForm: FormGroup = new FormGroup({});
public disableNextButton: boolean = false;
public disablePreviousButton: boolean = true;
public hActiveSlideIndex: number = 0;

ここに私のHTMLがあります

<form id="data-collector" [formGroup]="myForm">
    <ion-slides #mySlides (ionSlideWillChange)="hCheckSlidesOnChange()">
        <ion-slide *ngFor="let myValue of myValues" class="form-row">
            <myinputComponent></myinputComponent>
        </ion-slide>
    </ion-slides>
</form>
                
<ion-footer>
    <ion-button slot="start"
                [disabled]="mySlides ? disablePreviousButton : true"
                (click)="mySlides.slidePrev()">Previous</ion-button>
    <ion-button slot="end"
                [hidden]="mySlides ? disableNextButton : true"
                [disabled]="hIsCurrentSlideValid()" (click)="mySlides.slideNext()">Next</ion-button>
    <ion-button form="data-collector" slot="end" type="submit" 
                [hidden]="mySlides ? !disableNextButton : true" [disabled]="isFormValid" (click)="Save()">
                Save
            </ion-button>
</ion-footer>

不明な点がある場合はお知らせください。ただし、これは私にとってはうまくいっています

于 2021-01-28T13:34:50.653 に答える