我想使用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(...)])],
...
}