2017-09-12 25 views
2

attribut:SmartAdmin使用パイプは、私はUIフレームワークを使用してい

をこれは私がこのブートストラップ検証モジュール、それを使用しようとしているi18n

と国際化機能を提供します。

私はこれを入れた場合は、それが働いている:

<input type="text" class="form-control" name="firstname" data-bv-notempty="true" 
data-bv-notempty-message="The first name is required and cannot be empty" 
data-bv-stringlength-max="50" data-bv-stringlength-message="The first name must be less than 50 characters long"/> 

しかし、IIのパイプを使用しようとする:

<input type="text" class="form-control" name="firstname" data-bv-notempty="true" 
data-bv-notempty-message="{{'The first name is required and cannot be empty' | i18n}}" 
data-bv-stringlength-max="50" data-bv-stringlength-message="The first name must be less than 50 characters long" /> 

私はこのエラーを取得する:

はにバインドすることはできません'data-bv-notempty-message'は '入力'の既知の プロパティではないためです。 [エラー - >] [data-bv-notempty-message] = "'最初に入力した文字列が、最初の文字列であることを示します(" ut type = "text" class = "フォームコントロール" name = "firstname" data-bv-notempty = "true" ngの:///UserModule/[email protected]:22

質問:どのようにattribut入力にパイプを使用することができます国際化 " データ-BV-STRI")|名前は」必要なのですか?

EDIT:

import { Pipe, PipeTransform } from '@angular/core'; 
import {I18nService} from "./i18n.service"; 

@Pipe({ 
    name: 'i18n', 
    pure: false 
}) 
export class I18nPipe implements PipeTransform { 

    constructor(public i18nService: I18nService){} 

    transform(phrase: any, args?: any): any { 
    //console.log(phrase) 
    return this.i18nService.getTranslation(phrase); 
    } 

} 

方法::getTranslation()

public getTranslation(phrase:string):string { 
    return this.data && this.data[phrase] ? this.data[phrase] : phrase; 
} 
+1

のような結合属性を使用することができます。角度タグは角度2+のためのものです:-) – alexKhymenko

+1

@alexKhymenko正しくタグ付けされています。それは角度2+の質問 –

+1

@Portekoi申し訳ありませんが、角度2のバインディングは異なります。それが角であると仮定します.js。 – alexKhymenko

答えて

1

角度は、その属性名を理解していなかったので、それがエラーをスローするコードパイプを追加します。角度属性から外れたカスタム属性を使用できるようにするには、CUSTOM_ELEMENTS_SCHEMA要素を追加することを検討してください。これは、HTMLの他のカスタム属性です。

import { CommonModule } from '@angular/common'; 

@NgModule({ 
    declarations: [ ... ], 
    exports: [ ... ], 
    imports: [ ... ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule {} 

またangularJsタグを使用してください[attr.something]="value"

[attr.data-bv-notempty-message]="'The first name is required and cannot be empty' | i18n" 
関連する問題