angular 2 ng2-bootstrap：无法读取null的属性'样式'

我正在使用angular2中的ng2-boostrap。我使用webpack，我试图创建一个引导模式对话框，其中包含一个表单。该表单位于单独的组件中。如在https://valor-software.com/ng2-bootstrap/#/modals所描述的，我的模块中我输入angular 2 ng2-bootstrap：无法读取null的属性'样式'

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

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

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

子组件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)

出现这种情况仅在第一次刷新页面后，我点击。如果我在其中一个输入字段上单击两次或更多次，则错误不会从第二次出现。

你知道为什么抛出这个错误，这是什么意思？我该如何解决它？

来源

2017-02-26 N. Sola

尝试：

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

来源

2017-02-26 13:59:20

同样的事情。我得到完全相同的错误 –

找到了原因......问题是指令“onFocusHidden”，这是不正确地在我的代码引用，这是造成错误。现在我删除它，错误消失了。

来源

2017-02-26 19:42:52

angular 2 ng2-bootstrap：无法读取null的属性'样式'

回答

相关问题