bootstrap 模态中的组件

Question

我有一个场景，我正在使用一个显示在使用 ng-bootstrap 创建的模态弹出窗口中的表单。在模态中，我使用自定义组件来显示每个表单字段的验证消息，但看起来该组件并没有被 Angular 生命周期拾取和执行。

我使用按钮从它的父组件打开弹出窗口：

<button type="button" (click)="openFormModal()">Add something</button>

在导入了 MyModalComponent 的地方执行以下代码：

openFormModal() {
  const modalRef = this.modalService.open(MyModalComponent);
}

除了自定义 validation-messages 组件外，模态框本身并没有什么特别之处。为简洁起见，代码示例省略了各种内容：

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

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 在标准形式下完美工作，即不在模态中，但是当模态的 HTML 在屏幕上呈现时 validation-messages 呈现如下：

<validation-messages controlname="Name"></validation-messages>

而不是正常呈现的方式：

<validation-messages controlname="Business name" ng-reflect-control="[object Object]" ng-reflect-control-name="Business name">
  <!--bindings={
    "ng-reflect-ng-if": "false"
  }-->
</validation-messages>

我是 Angular 的新手，我确信这是我所缺少的非常基本的东西。

可能还值得一提的是，我必须将 schemas: [CUSTOM_ELEMENTS_SCHEMA], 添加到我的 app.module.ts 以使模态不抱怨 validation-messages 组件出现在 HTML.

如有任何帮助，我们将不胜感激。

编辑

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

Answer 1

有关添加 CUSTOM_ELEMENTS_SCHEMA 的错误消息提供了一条线索，表明 Angular 不知道 ValidationMessages 组件。由于您的 ValidationMessages 组件是 NotificationsModule 的一部分，因此您需要确保该模块找到进入全局应用程序模块的方式（通常是 app.module.ts）。

按如下方式修改 app.module.ts 应该可以解决问题：

@NgModule({
    imports: [
        ...,
        NotificationsModule
    ],
    declarations: [
        ...
    ],
    bootstrap: [
        ...
    ]
})
export class AppModule {
}

关于评论“是否添加使组件在根级别可用？”- 如果将它添加到 [= NotificationsModule 的 18=] - 像这样：

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

bootstrap 模态中的组件

Component inside ng-bootstrap modal

ng-bootstrap

angular