angular 2 ng2-bootstrap:无法读取null的属性'style‘

Question

我在angular2中使用ng2-boostrap。我使用的是webpack，我正在尝试创建一个包含窗体的引导模式对话框。该表单位于一个单独的组件中。正如https://valor-software.com/ng2-bootstrap/#/modals中所述，在我的模块中，我导入了

  imports: [ModalModule.forRoot(),...]

这是包含模式对话框的父组件的代码：

<button type="button" class="btn btn-primary" (click)="smModal.show()">
  New form
</button>

<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Create new Flex</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <new-flex-form></new-flex-form>
      </div>
    </div>
  </div>
</div>

包含表单的子组件：

@Component({
    selector: 'new-flex-form',
    template: require('./new.flex.form.component.html')
})

export class NewFlexFormComponent {

  form: FormGroup;

  constructor(fb : FormBuilder, private privateviewContainerRef: ViewContainerRef){
      this.form = fb.group({
        flex_name : ['', Validators.required],
        initial_value : ['', Validators.compose([Validators.required, CommonValidators.isNegativeNumber])]
      })
  }
}

new.flex.form.component.html：

<form [formGroup]="form" class="form-horizontal">
  <div class="form-group">
    <label for="flex-name" class="col-sm-3">Flex name</label>
    <div class="col-sm-7">
       <input id="component-name" class="form-control"
           formControlName="flex_name" onFocusHidden />
    </div>
  </div>
  <div class="form-group">
    <label for="initial-value" class="col-sm-3">Initial value</label>
    <div class="col-sm-7">
       <input id="initial-budjet" class="form-control"
           formControlName="initial_value" onFocusHidden />
    </div>
  </div>
</form>

模式对话框运行良好。但是，当我单击表单中的一个输入域时，我得到以下错误：

EXCEPTION: Error in ./NewFlexFormComponent class NewFlexFormComponent - inline template:4:7 caused by: Cannot read property 'style' of null
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:49 ORIGINAL EXCEPTION: Cannot read property 'style' of null
ErrorHandler.handleError @ error_handler.js:49
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:53 TypeError: Cannot read property 'style' of null
    at DomRenderer.setElementStyle (dom_renderer.js:235)
    at DebugDomRenderer.setElementStyle (debug_renderer.js:122)
    at OnFocusHiddenDirective.onFocus (onfocus.hidden.directive.ts:21)
    at Wrapper_OnFocusHiddenDirective.handleEvent (/SharedModule/OnFocusHiddenDirective/wrapper.ngfactory.js:33)
    at CompiledTemplate.proxyViewClass.View_NewFlexFormComponent0.handleEvent_9 (/FlexModule/NewFlexFormComponent/component.ngfactory.js:211)
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408)
    at HTMLInputElement.<anonymous> (dom_renderer.js:276)
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (ng_zone.js:227)
    at ZoneDelegate.invokeTask (zone.js:264)

只有在刷新页面后第一次单击时才会发生这种情况。如果我在一个输入字段上单击两次或更多次，从第二次开始就不会显示错误。

你知道为什么抛出这个错误吗?它意味着什么？我怎么才能修复它呢？

Answer 1

尝试：

<form [formGroup]="form" class="form-horizontal">
  <div class="form-group">
    <label for="flex-name" class="col-sm-3">Flex name</label>
    <div class="col-sm-7">
       <input id="component-name" class="form-control"
          onFocusHidden 
           [formControl]="form.controls['flex_name']"/>
    </div>
  </div>
  <div class="form-group">
    <label for="initial-value" class="col-sm-3">Initial value</label>
    <div class="col-sm-7">
       <input id="initial-budjet" class="form-control"
           onFocusHidden 
           [formControl]="form.controls['initial_value']"/>
    </div>
  </div>
</form>

Answer 2

我发现why...the的问题是指令"onFocusHidden"，它在我的代码中没有被正确引用，它导致了这个错误。现在我删除了它，错误也就消失了。