输入 - 单击事件触发但不点击页面上绑定的其他事件

Question

在我正在建造的Angular 4+表格上;我可以触发click事件，但我无法绑定到Internet Explorer 11中表单上任何其他形式的事件。

我需要修理什么？谢谢。

请注意，我已经简化了代码，以便我只显示手头的问题。

Angular 4打字稿代码

import { Component, Directive, OnInit, OnDestroy, HostListener, AfterViewInit, NgModule } from '@angular/core';
import { ActivatedRoute, Router, RouterModule, Routes, Params } from '@angular/router';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
import { NgbModal, NgbModalRef, NgbModule, NgbPanelChangeEvent, NgbTabset, NgbTabChangeEvent } from "@ng-bootstrap/ng-bootstrap";
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'case-form',
    templateUrl: "./case.component.html",
    styleUrls: ["./case.component.css"]
})
export class CaseComponent implements OnInit, OnDestroy {
    caseForm: FormGroup;

    constructor(
        private activatedRoute: ActivatedRoute,
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private modalService: NgbModal,
        private router: Router
    ) {
    }

    ngOnInit() {
        this.resetCaseForm();
    }

    ngOnDestroy() {

    }

    numbersOnlyEvent(maxLength: number, event: any) {
        event.preventDefault();
        console.log('Fire!!!');

        /* Currently doesn't fire */
    }

    CaseNameLostFocus(event: Event) {
        event.preventDefault();
        console.log('Fire!!!');

        /* Currently doesn't fire */
    }

    CaseNameReceiveFocus(event: Event) {
        event.preventDefault();
        console.log('Fire!!!');

        /* Currently doesn't fire */
    }

    resetCaseForm() {

        this.caseForm = this.formBuilder.group({
            'CaseName': ['', Validators.compose([Validators.required, Validators.minLength(14), Validators.maxLength(18), Validators.pattern(/^\d{5}-?\d{3}-?\d{5}-?\d{1}/)])],
        });
    }

    testClick(event: Event) {
        event.preventDefault();
        console.log('Test Click!');

        /*This fires*/
    }
}

Angular 4模板标记

<form [formGroup]="caseForm" novalidate>
    <ngb-tabset #tabs="ngbTabset" >
        <ngb-tab id="CaseTab" title="Case">
            <ng-template ngbTabContent>
                <div>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tabTaxPayerInfo-panel" role="tabpanel" aria-expanded="true" aria-labelledby="tabTaxPayerInfo">
                            <!---->
                            <div class="col-sm-10 light-blue-background" disabled style="display: inline-block; " id="UniqueKeyFields">
                                <div class="form-group row row-buffer {{caseForm.controls.CaseName.valid ? 'has-success' : 'has-danger'}}">
                                    <label class="col-sm-2 adjust-padding-left col-form-label" for="CaseName" placement="right">CaseName</label>
                                    <div class="col-sm-4 ">
                                        <input [attr.disabled]="UniqueFieldsLocked ? true : null" class="{{( !caseForm.controls.CaseName.valid) ? 'form-control form-control-danger' : 'form-control form-control-success'}}" type="text" formControlName="CaseName" placeholder="CaseName" name="CaseName" (click)="testClick($event);" (focus)="CaseNameReceiveFocus($event); false;" (keypress)="numbersOnlyEvent(14, $event);" (blur)="CaseNameLostFocus($event);" />
                                        <ng-container *ngIf="!caseForm.controls.CaseName.valid">
                                            <small class="text-danger">
                                                A valid CaseName for this case is required!
                                            </small>
                                        </ng-container>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
        </ngb-tab>
    </ngb-tabset>
</form>