javascript - Angular2/4 Material 设计， 不工作 - 当没有找到结果时

Question

我正在将 Angular4 Material Design 与 WebAPI 结合使用 - 我正在尝试显示验证消息 - “未找到匹配项”当用户在( Material 自动完成)中输入无效值时。

我尝试了一些基于谷歌搜索的东西:- https://material.angular.io/components/input/overview#custom-error-matcher https://github.com/angular/material2/blob/4383f51a58de1fccad2ed64443a5e22ab435c02b/src/demo-app/input/input-demo.ts#L56

下面是我当前的实现:-

HTML

     <div class="form-group spaces" style="width: 30%">
     <mat-form-field>
     <input  [errorStateMatcher]="myErrorStateMatcher.bind(this)" matInput 
     placeholder="NUMBER" [matAutocomplete]="auto" type="text" 
     formControlName="validNumber" required [formControl]="stateCtrl">
     <md-error *ngIf="validNumbers?.length === 0"> No Matching Records 
     Found!
     </md-error>
    </mat-form-field>

    <mat-autocomplete #auto="matAutocomplete" mat-no-cache="true">
    <mat-option *ngFor="let c of validNumbers " [value]="c">{{c}}</mat-
    option>
    </mat-autocomplete>
    </div>

typescript :-

 import { ErrorStateMatcher } from '@angular/material/core';
 public validNumbers;

 myErrorStateMatcher(control, form): boolean
 {
    if (this.validNumbers && !this.validNumbers.length)
    {
        return true;
    }

    // Error when invalid control is touched, or submitted
    const isSubmitted = form && form.submitted;
    return !!(control.invalid && (control.touched || isSubmitted));
  }

附加错误信息:-

Answer 1

myErrorStateMatcher 需要是类实例，而不是函数。此外，.bind(this) 不是必需的/不执行任何操作，因为您在模板中无法访问 this。

参见文档:https://material.angular.io/components/input/overview#custom-error-matcher

你应该能够用 isErrorState 创建一个对象:

@Component(...)
class MyComponent {
  ...
  myErrorStateMatcher = {
    isErrorState(control, form) {
      /* do your check here */
    }
  }

如果这不起作用，您也可以尝试 myErrorStateMatcher: ErrorStateMatcher =。最终你可能需要/想要创建一个类:

class MyErrorStateMatcher implements ErrorStateMatcher

具有您正在使用的 isErrorStateMethod，然后在您的组件中设置 myErrorStateMatcher = new MyErrorStateMatcher。