Hello everyone!
I don't know if any of you had this issue but after updating my project to Ionic 3.5.0 it seems like the focus and blur events are deprecated in ion-input.
these are the messages logged: "(focus) is deprecated in ion-input, use (ionFocus) instead" the same for blur.
I have a directive that makes use of the blur event so I can format the input values before send them to the server. I wouldn't want to go input by input setting the ionBlur handler (my app is full of forms).
Does any of you would know how i could implement the ionBlur in my directive?
import { Directive, HostListener, ElementRef, Attribute} from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector:'[inputFormat]'
})
export class InputFormat{
elem:HTMLInputElement;
constructor(
public elRef:ElementRef,
public control:NgControl,
@Attribute('inputFormat') public inputFormat:string){
this.elem = elRef.nativeElement;
}
capitalize(input:String){
let preps = ['de', 'di', 'do', 'da', 'dos', 'das', 'dello', 'della', 'dalla', 'dal', 'del', 'e', 'em', 'na', 'no', 'nas', 'nos', 'van', 'von', 'y'];
let str = input.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
return p1 + p2.toUpperCase();
});
//console.log(str);
let arr = str.split(" ");
//console.log(arr);
for(let i = 0; i<arr.length; i++){
let istr = arr[i];
for(let j in preps){
if(istr.toLowerCase() == preps[j]){
arr[i] = preps[j];
}
}
}
str = arr.join(' ');
return str;
}
@HostListener('focus', ['$event.target.value'])
onFocus(value){}
@HostListener('blur', ['$event.target.value'])
onBlur(value){
if(value != undefined && value != ''){
if(this.inputFormat == 'lowercase'){
this.control.control.setValue(value.toLowerCase());
}
else if(this.inputFormat == 'uppercase'){
this.control.control.setValue(value.toUpperCase());
}
else if(this.inputFormat == 'capitalize'){
let val = this.capitalize(value.toLowerCase());
this.control.control.setValue(val);
}
}
}
}My system infos:
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.12
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : ios 4.3.1
Ionic Framework : ionic-angular 3.5.0
System:
Node : v6.5.0
OS : OS X El Capitan
Xcode : Xcode 8.1 Build version 8B62
ios-deploy : 1.9.1
ios-sim : 5.0.13
npm : 3.10.3thanks a lot!!
