trong Angular2 cách biết khi nào trường nhập biểu mẫu bị mất tiêu điểm

Question

Trong Angular2 cách biết khi nào trường nhập liệu bị mất tiêu điểm ..! Nếu tôi sử dụng quan sát trên biểu mẫu:

form.valueChange.subscribe... 

wont work kể từ khi tôi thực sự muốn biết khi một cánh đồng bị mất nó mờ (tập trung) vì vậy tôi có thể cập nhật cửa hàng của tôi (nếu tôi cập nhật các cửa hàng trước khi mất tập trung, tôi con trỏ vào một văn bản đầu vào được chuyển lên cuối cùng, kể từ khi dữ liệu được hoán đổi là lạ tìm)

tất nhiên tôi cũng có thể thêm (change)="" trên mỗi đầu vào, nhưng tôi có rất nhiều of'em ...

Tôi đã suy nghĩ điều gì đó về các loại:

this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => { 
    if (this.form.dirty){ 
    this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes)) 
    } 
}); 

nhưng vấn đề là bẩn vẫn bẩn, vì vậy nó bị mắc kẹt trong một vòng lặp vĩnh cửu của phát hiện sự thay đổi ...

tx

Sean

Answer 1

Sự kiện blur không bong bóng, do đó chúng ta cần lắng nghe trực tiếp mọi yếu tố đầu vào. Góc cung cấp một giải pháp tốt đẹp cho tình huống này.

Chỉ thị áp dụng cho tất cả các yếu tố đầu vào bên trong mẫu của bạn.

chỉ thị này sử dụng một host-nghe để nghe cho blur sự kiện trên tất cả các yếu tố đó chọn áp dụng và chuyển một bọt input-blur sự kiện:

@Directive({ 
    selector: 'input,select', 
    host: {'(blur)': 'onBlur($event)'} 
}) 
class BlurForwarder { 
    constructor(private elRef:ElementRef, private renderer:Renderer) {} 

    onBlur($event) { 
    this.renderer.invokeElementMethod(this.elRef.nativeElement, 
     'dispatchEvent', 
     [new CustomEvent('input-blur', { bubbles: true })]); 
    // or just 
    // el.dispatchEvent(new CustomEvent('input-blur', { bubbles: true })); 
    // if you don't care about webworker compatibility 
    } 
} 

Bằng cách thêm các chỉ thị BlurForwarder-directives: [...] nó sẽ được áp dụng cho tất cả các phần tử trong mẫu của nó khớp với công cụ chọn.
Các host-listener lắng nghe cho bọt input-blur sự kiện và kêu gọi xử lý sự kiện của chúng tôi:

@Component({ 
    selector: 'my-component', 
    directives: [BlurForwarder], 
    host: {'(input-blur)':'onInputBlur($event)'}, 
    template: ` 
<form> 
    <input type="text" [(ngModel)]="xxx"> 
    <input type="text" [(ngModel)]="yyy"> 
    <input type="text" [(ngModel)]="zzz"> 
</form>` 
}) { 
    onInputBlur(event) { 
    doSomething(); 
    } 
} 

Answer 2

Tại sao không sử dụng focusout nó bong bóng theo mặc định trong câu trả lời DOM