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">×</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)
出现这种情况仅在第一次刷新页面后,我点击。如果我在其中一个输入字段上单击两次或更多次,则错误不会从第二次出现。
你知道为什么抛出这个错误,这是什么意思?我该如何解决它?
答
尝试:
<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>
答
找到了原因......问题是指令“onFocusHidden”,这是不正确地在我的代码引用,这是造成错误。现在我删除它,错误消失了。
同样的事情。我得到完全相同的错误 –