¿Cómo detecta un evento onBlur en Angular2? Quiero usarlo con
<input type="text">
¿Alguien puede ayudarme a entender cómo usarlo?
fuente
¿Cómo detecta un evento onBlur en Angular2? Quiero usarlo con
<input type="text">
¿Alguien puede ayudarme a entender cómo usarlo?
Úselo (eventName)
para vincular eventos a DOM, básicamente ()
se usa para vincular eventos. También se usa ngModel
para obtener un enlace bidireccional para la myModel
variable.
Margen
<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">
Código
export class AppComponent {
myModel: any;
constructor(){
this.myModel = '123';
}
onBlurMethod(){
alert(this.myModel)
}
}
Alternativa (no preferible)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
Para que el formulario controlado por modelo active la validación blur
, puede pasar el updateOn
parámetro.
ctrl = new FormControl('', {
updateOn: 'blur', //default will be change
validators: [Validators.required]
});
También puede usar el evento (focusout) :
Úselo (eventName)
para vincular eventos a DOM, básicamente ()
se usa para vincular eventos. También puede utilizar ngModel
para obtener enlaces bidireccionales para su model
. Con la ayuda de ngModel
usted puede manipular el model
valor de la variable dentro de su component
.
Haz esto en un archivo HTML
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
Y en su archivo (componente) .ts
export class AppComponent {
model: any;
constructor(){ }
someMethodWithFocusOutEvent(){
console.log('Your method called');
// Do something here
}
}
someMethodWithFocusOutEvent
el programa entra en un bucle cuando la alerta hace que el campo pierda su enfoque, ¿hay alguna manera de solucionarlo?
puede utilizar directamente el evento (desenfoque) en la etiqueta de entrada.
<div>
<input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
{{result}}
</div>
y obtendrá una salida en " resultado "
HTML
<input name="email" placeholder="Email" (blur)="$event.target.value=removeSpaces($event.target.value)" value="">
TS
removeSpaces(string) {
let splitStr = string.split(' ').join('');
return splitStr;
}
/*for reich text editor */
public options: Object = {
charCounterCount: true,
height: 300,
inlineMode: false,
toolbarFixed: false,
fontFamilySelection: true,
fontSizeSelection: true,
paragraphFormatSelection: true,
events: {
'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}
Esta es la respuesta propuesta en el repositorio de Github:
// example without validators
const c = new FormControl('', { updateOn: 'blur' });
// example with validators
const c= new FormControl('', {
validators: Validators.required,
updateOn: 'blur'
});
Github: feat (formularios): agregue la opción updateOn blur a FormControls
Intenta usar (focusout) en lugar de (desenfoque)