Компонент внутри мод ng-bootstrap - PullRequest
Новая
       0

Компонент внутри мод ng-bootstrap

0 голосов
/ 22 января 2019

У меня есть сценарий, в котором я использую форму, отображаемую в модальном всплывающем окне, которое создается с помощью 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 {}

1 Ответ

0 голосов
/ 23 января 2019

Сообщение об ошибке при добавлении 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 {}
...