我想使用errorStateMatcher显示几条错误消息。我正在使用具有反应形式的Angular Material 2组件。我还使用required来控制何时出现错误消息。这适用于内置验证器，如No Matching Records are found。但是，对于matAutocomplete，我还想在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())
}
}
，我不知道如何使用它来比较长度。
组件代码块：
/** 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));
}
}
我希望我的errorStateMatcher函数包含两个条件，如下所示。
filteredInsuranceVendors其中一个问题是，我不知道如何处理Array<object>因为它的Observable。我尝试将其转换为errorStateMatcher，但仍无法将其与Bash一起使用。
任何输入都将受到高度赞赏。谢谢！
答案 0 :(得分：0)
我刚刚使用Validators.compose
this.form = this.fb.group({
field: ['', Validators.compose([Validators.required, Validators.pattern(...)])],
...
}