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

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

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

데모

---

대안 1

<input type="text" [ngModel]="myModel" (ngModelChange)="myModel=$event">

---

대안 2 (바람직하지 않음)

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

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() {
   console.log('Your method called');
   // Do something here
 }
}

입력 태그에 이벤트를 직접 사용할 수 있습니다.

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

그러면 "결과"로 출력됩니다.

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 repo에 대한 제안된 답변입니다.

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github : feat(폼): FormControls에 updateOnburgh 옵션 추가

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

다른 가능한 대안

HTML 구성 요소 파일:

<input formControlName="myInputFieldName" (blur)="onBlurEvent($event)">

TypeScript 구성 요소 파일:

import { OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyEditComponent implements OnInit {

    public myForm: FormGroup;
    
    constructor(private readonly formBuilder: FormBuilder) { }
    
    ngOnInit() {

        this.myForm = this.formBuilder.group({
            
            myInputFieldName: ['initial value', { validators: [Validators.required, Validators.maxLength(100), anotherValidator], updateOn: 'blur' }],

        });
    }

    onBlurEvent(event) {
        
        // implement here what you want

        if (event.currentTarget && event.currentTarget.value && event.currentTarget.value !== '') { }

    }
}

저는 Angular 14에서 이런 일을 하게 되었습니다.

<form name="someForm" #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input
 matInput
 type="email"
 name="email"
 autocomplete="email"
 placeholder="EMAIL"
 [ngModel]="payload.email"
  #email="ngModel"
  (blur)="checkEmailBlur(f)"
  required
  email
  tabindex="1"
  autofocus
 />

그 다음에... .ts로

 checkEmailBlur(f: NgForm) {
     const email = f.value.email;

언급URL : https://stackoverflow.com/questions/34918198/how-to-use-onblur-event-on-angular2