Forms 在转到下一张幻灯片之前，如何验证爱奥尼亚幻灯片中的表单？

我正在构建一个包含4张幻灯片的ionic应用程序，每张幻灯片中都有表单，使用slideNext（）移动到下一张幻灯片。在转到下一张幻灯片之前，我是否可以验证每个幻灯片表单？在提交所有表单数据之前，我会尝试使用“如果”语句检查最后一张幻灯片上的幻灯片的有效性，但有些表单需要来自早期幻灯片的用户输入，因此表单需要在幻灯片更改时进行验证。如何执行此操作？

我有一个检查表单字段有效性的函数

    /**
     * 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中使用，而不触发无休止的更新循环

因此，我必须添加一个函数，当幻灯片发生更改时，该函数存储幻灯片上的活动索引

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

以前的
下一个
拯救

让我知道，如果有什么是不清楚的，但这是我的工作