CODEWITHSUNDEEP
angular
Portekoi
Portekoi

Reputation: 1147

Use pipe in an input attribute

I'm using an UI framework : SmartAdmin

This provide an internationalization feature with i18n

I'm trying to use it this Boostrap Validation Module.

If I put this, it's working : 

 <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"/>

But I I try to use a pipe : 

<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" />

I get this error :

Can't bind to 'data-bv-notempty-message' since it isn't a known property of 'input'. ("ut type="text" class="form-control" name="firstname" data-bv-notempty="true" [ERROR ->][data-bv-notempty-message]="'The first name is required' | i18n" data-bv-stri"): ng:///UserModule/UserAccountComponent.html@66:22

Question : How can use pipe in an input attribut?

EDIT : Add code pipe :

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);
  }

}

Method : getTranslation()

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

Upvotes: 9

Views: 10911

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

It throws an error because Angular didn't understand that attribute name. To allow custom attribute to work which are out of angular context, you could consider adding CUSTOM_ELEMENTS_SCHEMA element, which will any other custom attribute on HTML.

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

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

You could also use attribute binding like [attr.something]="value"

[attr.data-bv-notempty-message]="'The first name is required and cannot be empty' | i18n"

Upvotes: 12

Related Questions