在md-error與mdAutocomplete和md-input-container上使用自定義驗證器。 （Material 2）

Question

我正在嘗試使用md-error標記在mdAutocomplete上顯示錯誤消息。我正在使用Angular和Material 2組件。 md-error消息顯示爲內置驗證程序，如required。但是，當No Matching Records are found（基本上當用戶鍵入下拉菜單中不存在的內容時）時，我還想顯示另一個錯誤消息md-error。所以，我試着用另一個md-error與*ngIf，但是這個錯誤信息從不顯示。我搜索了一下，看起來解決方案是有一個自定義驗證方法或指令。材料2提供了一種自定義驗證方法，但我無法將其與我的template based form一起使用。任何人都可以提供一個使用md-error的基於模板的自定義驗證的例子嗎？

示例代碼：

這不起作用：

<md-input-container> 
    <input mdInput 
     placeholder="Currency Type" 
     [(ngModel)]="policyObj.cost.premium.currencyType.name" 
     [mdAutocomplete]="premiumCurrencyTypeAuto" 
     [disabled]="disable" 
     (keydown)="PanelOptions($event, policyObj.cost.premium.currencyType, filteredPremiumCurrencyType, premiumCurrencyTypeAuto)" 
     (ngModelChange)="filteredPremiumCurrencyType = filterCurrency(policyObj.cost.premium.currencyType.name)" 
     name="currency_type1" required> 
    <md-error>This field is required</md-error> 
    <md-error *ngIf="filteredPremiumCurrencyType?.length === 0"> No Matching 
     Records Found!</md-error> 
</md-input-container> 

<md-autocomplete #premiumCurrencyTypeAuto="mdAutocomplete" [displayWith]="displayFn"> 
    <md-option *ngFor="let ct of filteredPremiumCurrencyType" [value]="ct"> 
    {{ ct.name }} 
    </md-option> 
</md-autocomplete> 

我試圖尋找在Material 2 - Custom Error Matcher，但不知道如何與基礎模板在我的情況使用形式。任何幫助，將不勝感激。謝謝！

Answer 1

errorStateMatcher應該與模板和反應形式一樣工作。像這樣的東西應該適用於你的用例：

<md-input-container> 
    <input mdInput [errorStateMatcher]="myErrorStateMatcher.bind(this)" ... > 
    <md-error *ngIf="policyObj.cost.premium.currencyType.name === ''">This field is required</md-error> 
    <md-error *ngIf="filteredPremiumCurrencyType?.length === 0" No Matching Records Found!</md-error> 
</md-input-container> 


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

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