Відповіді:
Використовувати (eventName)
для прив'язки події до DOM, в основному ()
використовується для прив'язки події. Також використовуйте ngModel
для отримання двосторонньої прив'язки для myModel
змінної.
Розмітка
<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">
Код
export class AppComponent {
myModel: any;
constructor(){
this.myModel = '123';
}
onBlurMethod(){
alert(this.myModel)
}
}
Альтернатива (не бажана)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
Для моделі, керованої формою для перевірки перевірки blur
, ви можете передати updateOn
параметр.
ctrl = new FormControl('', {
updateOn: 'blur', //default will be change
validators: [Validators.required]
});
Ви також можете використовувати (фокусування) подію:
Використовувати (eventName)
для прив'язки події до DOM, в основному ()
використовується для прив'язки події. Також ви можете використовувати ngModel
для отримання двосторонньої прив'язки для свого model
. За допомогою ngModel
ви можете маніпулювати model
змінним значенням всередині вашогоcomponent
.
Зробіть це у файлі HTML
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
І у вашому (компонентному) .ts файлі
export class AppComponent {
model: any;
constructor(){ }
someMethodWithFocusOutEvent(){
console.log('Your method called');
// Do something here
}
}
someMethodWithFocusOutEvent
програма переходить у цикл, оскільки попередження змушує поле втрачати фокус, чи є спосіб це виправити?
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()); }}
Це запропонована відповідь на репортажі Github:
// example without validators
const c = new FormControl('', { updateOn: 'blur' });
// example with validators
const c= new FormControl('', {
validators: Validators.required,
updateOn: 'blur'
});
Github: feat (форми): додайте параметр updateOn blur до FormControls
Спробуйте використовувати (focusout) замість (blur)