尝试使用matAutocomplete和matInput在Reactive表单中显示多个<mat-error>消息（Material 2）

我想使用 mat-error 显示几条错误消息 . 我正在使用具有反应形式的Angular Material 2组件 . 我也在使用 errorStateMatcher 来控制出现错误消息的时间 . 这适用于内置验证器，如 required . 但是，对于matAutocomplete，我还想在 No Matching Records are found 时（基本上当用户键入下拉列表中没有的内容时） .

表单的html部分如下所示

<mat-form-field>
                        <input matInput
                               [matAutocomplete]="insurerAuto"
                               formControlName="insurer"
                               [errorStateMatcher]="requiredErrorState"
                               (keydown)="PanelOptions($event, insurerAuto)"
                               placeholder="Insurer" required>
                        <mat-autocomplete #insurerAuto="matAutocomplete"
                                          [displayWith]="displayFn">
                            <mat-option *ngFor="let insurer of filteredInsuranceVendors|async"
                                        [value]="insurer">
                                {{ insurer.name }}
                            </mat-option>
                        </mat-autocomplete>
                        <mat-error>{{errorMsgs.requiredMsg}}</mat-error>
                    </mat-form-field>

如您所见，我有一个 mat-error 来显示“必填字段”消息 . 但我想要这样的东西：

<mat-form-field>
                        <input matInput
                               [matAutocomplete]="insurerAuto"
                               formControlName="insurer"
                               [errorStateMatcher]="requiredErrorState"
                               (keydown)="PanelOptions($event, insurerAuto)"
                               placeholder="Insurer" required>
                        <mat-autocomplete #insurerAuto="matAutocomplete"
                                          [displayWith]="displayFn">
                            <mat-option *ngFor="let insurer of filteredInsuranceVendors|async"
                                        [value]="insurer">
                                {{ insurer.name }}
                            </mat-option>
                        </mat-autocomplete>
                        <mat-error *ngIf="policyForm.get('policyType').get('subType').hasError('required')">{{errorMsgs.requiredMsg}}</mat-error>
                        <mat-error *ngIf="(filteredInsuranceVendors|async)?.length === 0">No Matching records found!</mat-error>
                    </mat-form-field>

使用两个 mat-error 标记，其中 *ngIf 条件控制为何时显示相应的错误消息 . 我遇到的问题是 filteredInsuranceVendors ，因为它是 Observable 而我使用 async ，我不知道如何使用它来比较长度 .

组件代码块：

/** Error when invalid control is dirty, touched, or submitted. */
export class RequiredErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
    }
}

export const errorMessages: { [key: string]: string } = {
    requiredMsg: 'This field is required'
};

export class SomeComponent implements OnInit {
    requiredErrorState = new RequiredErrorStateMatcher();
    errorMsgs = errorMessages;
    filteredInsuranceVendors:  Observable<Array<object>>;

    filterInsuranceVendor(): void {
        const insurerControl = this.policyForm.get('insurerInfo.insurer');
        this.filteredInsuranceVendors = this.commonFilter(insurerControl, this.insuranceVendors);

    }

        commonFilter(control: AbstractControl, lst: Array<object>): Observable<any> {
        return control.valueChanges
            .map(lstObj => this.displayFn(lstObj))
            .map(ObjName =>
                ObjName ? this.utilityService.filterForAutocomplete(ObjName, lst) : lst.slice())
    }

}

我想让我的errorStateMatcher函数包含两个条件，如下所示 .

/** Error when invalid control is dirty, touched, or submitted. */
export class RequiredErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
       if (this. filteredInsuranceVendors && !this. filteredInsuranceVendors.length) {
            return true;
        }
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
    }
}

其中一个问题是，我不知道如何处理 filteredInsuranceVendors ，因为它是Observable . 我尝试将其转换为 Array<object> ，但仍无法将其与 errorStateMatcher 一起使用 .

任何意见都将受到高度赞赏 . 谢谢！