如何在移動到下一張幻燈片之前驗證離子幻燈片中的表單？

Question

我正在構建一個離子應用程序，其中包含 4 張幻燈片，每張幻燈片中都有 forms，使用 slideNext() 移動到下一張幻燈片。 有沒有一種方法可以在移動到下一張幻燈片之前驗證每個幻燈片表單？ 在提交所有表單數據之前，我會嘗試使用“if”語句檢查最后一張幻燈片的有效性，但一些 forms 需要用戶從早期幻燈片中輸入，因此需要在更換幻燈片時驗證 forms。 我怎樣才能做到這一點？

Answer 1

我有這個 function 來檢查我的表單字段的有效性。

    /**
     * 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;
    }

只是為了讓事情更復雜一點，活動索引檢查返回 promise 以便不能在 html 中使用而不會觸發無限循環的更新

所以我必須添加一個 function ，當幻燈片更改時，它會將活動索引存儲在幻燈片之外

    /**
     * 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>

讓我知道是否有任何不清楚的地方，但是是的，這對我有用