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才能获得不抱怨HTML中存在validation-messages组件的模式。

任何帮助将不胜感激。

修改

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

关于注释“ 是否添加了该组件以使该组件在根级别可用？”-仅当将其添加到目录的exports中时，该组件才在根级别可用。 NotificationsModule-像这样：

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

ng-bootstrap模态中的组件

1 个答案: