<mat-error> 메시지를 반응 형 (material 2)으로 matAutocomplete 및 matInput으로 표시하려고 시도했습니다.

Question

mat-error을 사용하여 몇 가지 오류 메시지를 표시하려고합니다. Reactive 형태의 Angular Material 2 구성 요소를 사용하고 있습니다. 또한 오류 메시지가 나타날 때를 제어하기 위해 errorStateMatcher을 사용하고 있습니다. 이것은 required과 같은 내장 된 유효성 검사기에서 잘 작동합니다. 그러나 matAutocomplete의 경우 No Matching Records are found (기본적으로 사용자가 드롭 다운에없는 것을 입력 할 때)을 원합니다.

형태의 html 부분은, 나는 '필요 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>{{errorMsgs.requiredMsg}}</mat-error> 
        </mat-form-field> 

당신이 볼 수 있듯이

아래처럼 보인다.

<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()) 
    } 

} 

나는 아래와 같은 두 condtions을 포함하는 내 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)); 
    } 
} 

문제 중 하나는 Observable이므로 filteredInsuranceVendors을 어떻게 처리해야할지 모르겠다. 내가 Array<object>으로 변환하려고 시도했지만 여전히 errorStateMatcher과 함께 사용할 수 없었습니다.

모든 입력 사항을 높이 평가할 것입니다. 감사!

Answer 1

난했습니다 그냥 사용 Validators.compose

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