カスタムエラーメッセージ

Question

入力要素にrequiredがあり、そこにカスタムエラーメッセージを設定したいと思います。 oninvalid="this.setCustomValidity('custom error')"

しかし、私はjsonファイル内にあるリソースからそのエラー・メッセージを読みたい：

これは動作します。私は <span>{{'General.EmptySearch' | translate }}</span>私のエラーメッセージを表示しますi18nとを使用しています。

ので、私はそれをやる場合：

は

oninvalid="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

それはイベントプロパティにバインド

言うセキュリティ上の理由から、使用してください（無効）=のために許可されていない 'oninvalid' .. 。 'oninvalid'がディレクティブ入力の場合、そのディレクティブが現在のモジュールによってインポートされていることを確認してください。

ok私はそれを変更します。

(invalid)="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

エラーがある：私はそれをやっている

ガット補間（{{}}）式がカラム24で予想された[this.setCustomValidity（ '{{[一般.EmptySearch '| translate}}'）]

何が問題なのですか。

は、ここに私のフォームです：

int型.tsファイル

searchval: FormGroup; 
ngOnInit() { 
     this.searchval = new FormGroup({ 
      Search: new FormControl('') 
     }); 
} 

とhtml

<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval"> 
        <input type="text" class="form-control" required formControlName="Search" placeholder="{{ 'General.Search' | translate }}"> 
        <button type="submit"></button> 
</form> 

Answer 1

OK、あなたはモデル駆動型形式の構文を使用しています。

official doc on form validationをご覧ください。これは、フォームの検証を適切な方法で行う方法を示しています。また、あなたの質問にあった（あなたのテンプレートの対）あなたのコードで検証メッセージを持っている方法を示しています。検証メッセージがコードに入ったら、それを翻訳することに問題はありません。

サイドノート：(invalid) DOMイベントを見ているフィールドを検証する理由が本当に不思議です。私はそれが決してそれを見たことがない。