尝试更改步骤

Question

我在Angular 4中有一个垂直的线性材质步进器（Angular Material2），当我尝试更改步骤时，我的两个选择的错误状态不会被触发。它非常适合输入。

我已经创建了一个自定义错误状态匹配器，但这仅在单击下一个按钮时才有用 - 而不是在尝试通过单击步骤标题来更改步骤时，因为它无法被拦截。错误匹配器检查控件是否有效，以及用户是否尝试导航到另一个步骤。奇怪的是，这确实使select激活其错误类，（转向警告颜色），但不显示mat错误。我认为这是因为mat错误有问题，但如果我创建一个错误状态匹配器，只返回true，不涉及检查，它会显示mat错误。这有什么理由和解决方法吗？

component.html

<mat-vertical-stepper linear #stepper>
<mat-step label="Organisation" formGroupName="organisation" [stepControl]="form.get('organisation')">
    <div class="field-container">
        <mat-form-field class="field">
            <input matInput placeholder="Organisation name" formControlName="name">
            <mat-error *ngIf="form.get('organisation.name').hasError('required')">
                You must enter an organisation name
            </mat-error>
            <mat-error *ngIf="form.get('organisation.name').hasError('minlength')">
                Organisation name must be at least 2 characters long
            </mat-error>
        </mat-form-field>

        <mat-form-field class="field">
            <input matInput placeholder="Organisation sector" formControlName="sector">
            <mat-error>
                You must enter an organisation sector
            </mat-error>
        </mat-form-field>

        <mat-form-field class="field">
            <mat-select placeholder="Number of employees" formControlName="employees" [errorStateMatcher]="errorStateMatcher">
                <mat-option *ngFor="let option of employeeQuantities" [value]="option.value">
                    {{ option.label }}
                </mat-option>
            </mat-select>
            <mat-error>
                You must enter the number of employees within your organisation
            </mat-error>
        </mat-form-field>

        <mat-form-field class="field">
            <mat-select placeholder="Subdomain/URL" (change)="subdomainOptionSelected()" formControlName="subdomainOption" [errorStateMatcher]="errorStateMatcher">
                <mat-option *ngFor="let option of subdomainOptions" [value]="option.value">
                    {{ option.label }}
                </mat-option>
            </mat-select>
            <mat-error>You must select a subdomain/URL</mat-error>
        </mat-form-field>

        <mat-form-field class="field" *ngIf="form.get('organisation.subdomainOption').value === 'Custom'">
            <input matInput placeholder="Custom Oporum subdomain" formControlName="subdomain">
            <span matPrefix>https://</span>
            <span matSuffix>.oporum.com</span>
            <mat-error *ngIf="form.get('organisation.subdomain').hasError('required')">
                You must enter a subdomain
            </mat-error>
            <mat-error *ngIf="form.get('organisation.subdomain').hasError('minlength')">
                Subdomain name must be at least 2 characters long
            </mat-error>
        </mat-form-field>

        <div class="stepper-nav-actions text-right">
            <button type="button" mat-raised-button (click)="next()" color="primary">Next</button>
        </div>
    </div>
</mat-step>
...
</mat-vertical-stepper>

component.ts

@ViewChild('stepper') stepper: MatVerticalStepper;

private stepperButtons = {
    'Organisation': {
        submitted: false
    },
    'Administrator': {
        submitted: false
    },
    'Plan': {
        submitted: false
    },
    'Review': {
        submitted: false
    }
};

errorStateMatcher = {
    isErrorState: (control: FormControl | null) => {
        const submitted = this.stepperButtons[this.selectedStep.label].submitted;

        return !!(control && control.invalid && (control.dirty || control.touched || submitted));
    }
};

next() {
    this.stepperButtons[this.selectedStep.label].submitted = true;
    this.stepper.next();
}

get selectedStep() {
    return this.stepper.selected;
}