Respostas:
Use (eventName)
para o evento de vinculação ao DOM, basicamente ()
é usado para vinculação de evento. Use também ngModel
para obter uma ligação bidirecional para a myModel
variável.
Markup
<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">
Código
export class AppComponent {
myModel: any;
constructor(){
this.myModel = '123';
}
onBlurMethod(){
alert(this.myModel)
}
}
Alternativa (não preferível)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
Para o formulário baseado em modelo para disparar a validação blur
, você pode passar o updateOn
parâmetro.
ctrl = new FormControl('', {
updateOn: 'blur', //default will be change
validators: [Validators.required]
});
Você também pode usar o evento (focusout) :
Use (eventName)
para o evento de vinculação ao DOM, basicamente ()
é usado para vinculação de evento. Além disso, você pode usar ngModel
para obter uma ligação bidirecional para o seu model
. Com a ajuda de ngModel
você pode manipular o model
valor da variável dentro do seu component
.
Faça isso no arquivo HTML
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
E em seu arquivo .ts (componente)
export class AppComponent {
model: any;
constructor(){ }
someMethodWithFocusOutEvent(){
console.log('Your method called');
// Do something here
}
}
someMethodWithFocusOutEvent
o programa entra em um loop conforme o alerta faz o campo perder o foco, há uma maneira de corrigir isso?
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 é a resposta proposta no repositório Github:
// example without validators
const c = new FormControl('', { updateOn: 'blur' });
// example with validators
const c= new FormControl('', {
validators: Validators.required,
updateOn: 'blur'
});
Github: feat (forms): adiciona a opção updateOn blur para FormControls
Tente usar (foco para fora) em vez de (desfoque)