forms - 如何在移动到下一张幻灯片之前验证 ionic 幻灯片中的表单？

Question

我正在构建一个 ionic 应用程序，其中包含 4 张幻灯片，每张幻灯片中都有表单，使用 slideNext() 移动到下一张幻灯片。有没有一种方法可以在移动到下一张幻灯片之前验证每张幻灯片表格？在提交所有表单数据之前，我会尝试使用“if”语句来检查最后一张幻灯片中幻灯片的有效性，但某些表单需要用户从较早的幻灯片中输入，因此需要在幻灯片更改时验证表单。我该怎么做？

Answer 1

我有这个功能可以检查我的表单字段的有效性。

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

所以我不得不添加一个函数，当幻灯片发生变化时，它可以将事件索引存储在幻灯片之外

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

如果有任何不清楚的地方，请告诉我，但是是的，这对我有用