angular 2 ng2-bootstrap: Cannot read property 'style' of null

Question

I am working with ng2-boostrap in angular2. I use webpack and i am trying to create a bootstrap modal dialog, containing a form. The form is in a separate component. As described in https://valor-software.com/ng2-bootstrap/#/modals, in my module I imported

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

This is the code of my parent component containing the modal dialog:

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

child component containing the form:

@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>

The modal dialog works well. However, when i click on one of the input fields in the form, i get the following error:

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)

This happens only the first time i click after refreshing the page. If i click two or more times on one of the input fields, the error does not show up from the second time on.

Do you know why is this error thrown and what does it mean? And how can i fix it?

Answer 1

Found out why...the problem was the directive "onFocusHidden", which was not correctly referenced in my code and it was causing the error. Now I removed it and the error is gone.

Answer 2

try to:

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