2

我正在构建一个离子应用程序，其中包含 4 张幻灯片，每张幻灯片中都有表格，使用 slideNext() 移动到下一张幻灯片。有没有一种方法可以在移动到下一张幻灯片之前验证每个幻灯片表单？在提交所有表单数据之前，我会尝试使用“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 回答