mdAutocompleteおよびmd-input-containerでのmd-errorでのカスタムバリデータの使用。 （材料2）

Question

md-errorタグを使用してmdAutocompleteにエラーメッセージを表示しようとしています。私はAngular with Material 2コンポーネントを使用しています。 requiredのような組み込みバリデータの場合、md-errorメッセージが表示されます。しかし、No Matching Records are found（基本的にユーザーがドロップダウンに何かを入力したとき）のときにmd-errorという別のエラーメッセージを表示したいと思います。だから、*ngIfと別のmd-errorを持ってみましたが、このエラーメッセージは表示されません。私はそれについてgoogledとソリューションは、カスタム検証メソッドまたはディレクティブを持っているように見えます。マテリアル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))); 
}