angular 2 ng2-bootstrap：プロパティ 'style' of nullを読み取ることができません。

Question

私はangular2でng2-boostrapを使用しています。私はwebpackを使用して、私は フォームを含むブートストラップモーダルダイアログを作成しようとしています。フォームは別のコンポーネントにあります。

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

：フォームを含む

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

子コンポーネント：https://valor-software.com/ng2-bootstrap/#/modalsで説明したように、私のモジュールで、私はこれがモーダルダイアログを含む私の親コンポーネントのコードです

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

インポート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) 

これは私がページを更新した後、クリック初回のみ起こります。入力フィールドの1つで2回以上クリックすると、2回目以降のエラーは表示されません。

なぜこのエラーがスローされ、その意味は分かりますか？そして私はそれをどのように修正できますか？

...問題は正しく私のコードで参照されなかったし、それがエラーを引き起こしたディレクティブ「onFocusHidden」、だった理由が分かった

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

試してみます。今私はそれを削除し、エラーがなくなった。

Answer 2

：へ