It seems that pipes are not supported in expressionProperties.
{{"Hello" | uppercase}}
<formly-form [model]="user" [fields]="userFields" [form]="form">
<div class="login-screen-button-container">
<button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="false">{{"LOGIN_SUBMIT" | translate}}</button>
</div>
</formly-form>
this.userFields = [
{
// the key to be used in the model values
// so this will be bound to user.username
key: 'username',
type: 'input-inline',
templateOptions: {
label: this._translateService.instant('LOGIN_LOGIN'),
placeholder: this._translateService.instant('LOGIN_LOGIN_PLACEHOLDER'),
focus: true
},
expressionProperties: {
'templateOptions.label': 'TODO',
'templateOptions.placeholder': '"Hello" | uppercase'
},
validation: Validators.compose([Validators.required, Validators.minLength(1)])
},
{
key: 'password',
type: 'input-inline',
templateOptions: {
type: 'password',
label: this._translateService.instant('LOGIN_PASSWORD'),
placeholder: this._translateService.instant('LOGIN_PASSWORD_PLACEHOLDER')
},
expressionProperties: {
'templateOptions.label': 'TODO',
'templateOptions.placeholder': 'TODO',
'templateOptions.disabled': '!model.username'
},
validation: Validators.compose([Validators.required, Validators.minLength(1)])
}
];
The "Hello" string is well uppercased in HTML but the placeholder raise an error in console:
ng2-formly.js:26 ReferenceError: uppercase is not defined
at FormlyField.eval (eval at evalExpression (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:23:113), <anonymous>:3:18)
at ModuleRecord.evalExpression (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:23:116)
at FormlyFieldExpressionDelegate.checkExpressionChange (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:97:75)
at FormlyField.FormlyCommon.ngDoCheck (http://localhost:3000/angular2/ng2-formly-custom/bundles/ng2-formly.js:273:45)
at DebugAppView._View_FormlyForm2.detectChangesInternal (FormlyForm.template.js:313:47)
at DebugAppView.AppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:200:14)
at DebugAppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:289:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:215:37)
at DebugAppView._View_FormlyForm1.detectChangesInternal (FormlyForm.template.js:199:8)
at DebugAppView.AppView.detectChanges (http://localhost:3000/angular2/@angular/core/src/linker/view.js:200:14)
The exception appeared when I tried to use "translate" pipe from ng2-translate but there is the same behavior from "uppercase" pipe from angular2.