Question

我正在尝试在具有两层嵌套FormArray且没有任何运气的表单上显示错误信息

给出以下形式：

initNewSessionForm(): void {
        this.newSessionForm = this.fb.group({
            // sessionName: this.fb.control(null),
            sessionStart: this.fb.control(new Date().toISOString(), Validators.required),
            sessionEnd: this.fb.control(new Date().toISOString(), Validators.required),
            numberOfWeeks: this.fb.control(null, Validators.required),
            gamesDays: this.fb.array([this.initGameDayAndTimes()]),
            byeWeeks: this.fb.control(false, Validators.required)
        });
    }

    initGameDayAndTimes(): FormGroup {
        return this.fb.group({
            // gamesDate represents a date for 'nth' number of games
            gamesDay: this.fb.control(null, Validators.required),
            // gamesTimes represents a list of times that games will be
            // played for the given gamesDate
            gamesTimes: this.fb.array([this.initGameTime()], this.requireTime())
        });
    }

    initGameTime(defaultValue?: string): FormGroup {
        return this.fb.group({
            gamesTime: this.fb.control(defaultValue ? defaultValue : null)
        });
    }

我正在尝试在gamesTimes FormArray上显示验证。基本上需要一个值，就是这样。所以我创建了一个自定义验证器，如下所示：

requireTime(): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } | null => {
            const gamesTimesFiltered = control.value.filter((formGroup) => formGroup.gamesTime !== null);
            if (gamesTimesFiltered.length) {
                return null;
            }
            return { timeRequired: { value: 'Please specify a time' } };
        };
    }

然后我在模板中显示此表单，如下所示：

<mat-form-field class="game-times-chips" floatLabel="always">
    <mat-chip-list #chipList aria-label="Game Times" [errorStateMatcher]="requireTime">
        <ng-container *ngFor="let gamesTime of gamesDay['controls'].gamesTimes['controls']; let indexGamesTime = index">
            <ng-container [formGroupName]="indexGamesTime">
                <mat-chip *ngIf="gamesTime.value.gamesTime" selectable="true" removable="true" (removed)="removeGameTime(indexGamesDay, indexGamesTime)">
                    {{ gamesTime.value?.gamesTime }}
                    <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
                <mat-error *ngIf="gamesDay['controls'].gamesTimes.touched && gamesDay['controls'].gamesTimes.errors"
                    >error {{ gamesDay['controls'].gamesTimes | log }}</mat-error
                >
            </ng-container>
        </ng-container>

        <input
            placeholder="Game Times..."
            [ngxTimepicker]="timePick"
            [matChipInputFor]="chipList"
            matChipInputAddOnBlur="true"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="addGameTime($event, indexGamesDay)"
        />

        <ngx-material-timepicker #timePick></ngx-material-timepicker>
    </mat-chip-list>
</mat-form-field>

现在，这里的问题是，永远不会显示mat-error。看来gamesDay['controls'].gamesTimes.touched属性始终设置为false，当我删除该检查时， gamesDay['controls'].gamesTimes.errors始终为true，因此始终显示错误。我也尝试使用errorStateMatcher，但是无法执行自定义的RequireTime错误状态匹配器。每当用户添加新时间时，我还添加了updateValueAndValidity()检查，但这似乎无济于事：

` ...  const gamesDaysFormArray = this.sessionForm.controls['gamesDays'] as FormArray;
            const control = gamesDaysFormArray.at(gamesDayIndex).get('gamesTimes') as FormArray;
            console.log('running update on form', control);
            control.updateValueAndValidity();`

我在这里错过了一些简单的东西吗？看来一切都应该按预期进行...

Mat-chips-list在嵌套FormArray上未显示mat-errors

0 个答案: