尝试使用 matAutocomplete 和 matInput 以反应形式显示多个 <mat-error> 消息（材料 2）

Question

我想使用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，因为它是可观察的。我尝试将其转换为Array<object>，但我仍然无法将它与errorStateMatcher 一起使用。

任何意见将不胜感激。谢谢！

Answer 1

我刚刚使用Validators.compose

this.form = this.fb.group({
field: ['', Validators.compose([Validators.required, Validators.pattern(...)])],
...
}