Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use pipe in an input attribute

Tags:

angular

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;
}
like image 573
Portekoi Avatar asked Sep 12 '17 17:09

Portekoi


People also ask

Why you shouldn't use Angular pipes with inputs?

The reason you cannot use [()] with a pipe is that pipes work only with one-way bindings. Therefore you must split out the pipe to only operate on the one-way binding and handle the event separately.

Can I use pipe in ngModel?

To use pipes within ngModel on input elements in Angular, we can use separate [(ngModel)] into [ngModel] and (ngModelChange) . to apply the useMyPipeToFormatThatValue pipe to item. value in ngModel . Then we handle our input change events in ngModelChange .

Can I use pipe in component Angular?

It's easy to create custom pipes to use in your templates to modify interpolated values. You don't have to duplicate your code if you want to also use a pipe's functionality in a component class. All you have to do really is inject the pipe like a service, and then call its transform method.


1 Answers

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"
like image 173
Pankaj Parkar Avatar answered Oct 13 '22 20:10

Pankaj Parkar