Angular 尝试更改步骤时未触发材料选择错误状态

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

我已经创建了一个自定义错误状态匹配器，但这只在单击按钮移动下一步时有用——而不是在试图通过单击步骤标题来更改步骤时，因为它无法被拦截。错误匹配器检查控件是否有效，以及用户是否尝试导航到其他步骤。奇怪的是，这确实会使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>

---

你解决过这个问题吗？

@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;
}