Angular2에서 onBlur 이벤트를 사용하는 방법은 무엇입니까?

Angular2에서 onBlur 이벤트를 어떻게 감지합니까? 나는 그것을 사용하고 싶다

<input type="text">

아무도 그것을 사용하는 방법을 이해하도록 도울 수 있습니까?

(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]
}); 

디자인 문서

(focusout) 이벤트를 사용할 수도 있습니다 .

(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
 }
}

입력 태그에서 직접 (흐리게) 이벤트를 사용할 수 있습니다 .

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

" result "에 출력이 표시됩니다.

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 (forms) : FormControls에 updateOn 흐림 옵션 추가

(흐림) 대신 (초점)을 사용하십시오.