[英]Component inside ng-bootstrap modal
I have a scenario where I'm using a form displayed inside a modal popup which is created using ng-bootstrap
. 我有一种情况,我使用的是使用
ng-bootstrap
创建的模式弹出窗口中显示的表单。 Within the modal I'm using a custom component to display validation messages for each form field but it doesn't look like that component is being picked up and executed by the Angular lifecycle. 在模态中,我正在使用自定义组件来显示每个表单字段的验证消息,但是它看起来好像不是Angular生命周期正在拾取和执行该组件。
I open the popup from it's parent component using a button: 我使用一个按钮从其父组件中打开弹出窗口:
<button type="button" (click)="openFormModal()">Add something</button>
Which executes the following code where MyModalComponent
has been imported: 它执行以下代码,其中已导入
MyModalComponent
:
openFormModal() {
const modalRef = this.modalService.open(MyModalComponent);
}
The modal itself is fairly unremarkable apart from the custom validation-messages
component. 除了自定义
validation-messages
组件之外,模态本身也没有什么变化。 The code sample has various things omitted for brevity: 为简洁起见,代码示例中省略了各种内容:
<div class="modal-body">
<form [formGroup]="myForm" class="form">
<input type="text" [ngClass]="'form-control'" formControlName="name" required maxlength="100">
<validation-messages [control]="myForm.controls.names" controlName="Name"></validation-messages>
</form>
</div>
The validation-messages
component is as follows: validation-messages
组件如下:
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from './notifications.validation.service';
@Component({
selector: 'validation-messages',
template: `<div *ngIf="errorMessage !== null" class="invalid-notification">{{errorMessage}}</div>`
})
export class ValidationMessages {
@Input() control: FormControl;
@Input() controlName: string;
constructor() { }
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) && (this.control.touched && this.control.invalid)) {
return ValidationService.getValidatorErrorMessage(propertyName, this.controlName, this.control.errors[propertyName]);
}
}
return null;
}
}
validation-messages
works perfectly in a standard form ie not in a modal but when the HTML for the modal renders on the screen the validation-messages
renders as follows: validation-messages
可以以标准形式(即不是模式形式)完美地工作,但是当模式的HTML呈现在屏幕上时, validation-messages
呈现如下:
<validation-messages controlname="Name"></validation-messages>
Instead of how it renders normally: 而不是它如何正常呈现:
<validation-messages controlname="Business name" ng-reflect-control="[object Object]" ng-reflect-control-name="Business name">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</validation-messages>
I'm pretty new to Angular and I'm sure that it's something pretty fundamental that I'm missing. 我是Angular的新手,我敢肯定这是我所缺少的基本知识。
It's probably also worth mentioning that I had to add schemas: [CUSTOM_ELEMENTS_SCHEMA],
to my app.module.ts
to get the modal to not complain about the validation-messages
component being present in the HTML. 可能还值得一提的是,我必须在我的
app.module.ts
添加schemas: [CUSTOM_ELEMENTS_SCHEMA],
以使模式不抱怨HTML中存在的validation-messages
组件。
Any help would be greatly appreciated. 任何帮助将不胜感激。
Edit 编辑
validation-messages
is also part of a notifications module: validation-messages
也是通知模块的一部分:
import { NgModule } from "@angular/core";
import { ValidationMessages } from "./notifications.validationmessages";
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule],
declarations: [ValidationMessages],
exports: [ValidationMessages]
})
export class NotificationsModule {}
The error message regarding adding CUSTOM_ELEMENTS_SCHEMA
gave a clue that Angular did not know about the ValidationMessages
component. 有关添加
CUSTOM_ELEMENTS_SCHEMA
的错误消息CUSTOM_ELEMENTS_SCHEMA
了一个线索,即Angular不知道ValidationMessages
组件。 As your ValidationMessages
component is part of the NotificationsModule
you need to ensure that this module finds it way up into the global application module (often app.module.ts
). 由于
ValidationMessages
组件是NotificationsModule
一部分,因此需要确保此模块找到它进入全局应用程序模块(通常为app.module.ts
)。
Modifying app.module.ts
as follows should fix the issue: 如下修改
app.module.ts
应该可以解决此问题:
@NgModule({
imports: [
...,
NotificationsModule
],
declarations: [
...
],
bootstrap: [
...
]
})
export class AppModule {
}
Regarding the comment " Does adding that make the component available at the root level? " - it will only be available at the root level if you add it to the exports
of the NotificationsModule
- like this: 关于注释“ 添加是否使组件在根级别可用? ”-仅当将其添加到
NotificationsModule
的exports
,它才在根级别可用-像这样:
import { NgModule } from "@angular/core";
import { ValidationMessages } from "./notifications.validationmessages";
import { CommonModule } from '@angular/common';
@NgModule({
imports: [CommonModule],
declarations: [ValidationMessages],
exports: [ValidationMessages] // Available at root level/other modules
})
export class NotificationsModule {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.