angular 2 ng2-bootstrap : null의 'style'속성을 읽을 수 없습니다.

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 :

모달 대화 상자가 잘 작동합니다.

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

시도가로 : 문제가 제대로 내 코드에서 참조되지 않은 지침 "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 2

밖으로 발견하고는 오류의 원인이되었다. 이제 제거하고 오류가 사라졌습니다.