添加 [formGroup]="FormName" 或 formControlName="elementName" 时，ng-bootstrap 模式不会弹出

Question

我使用 ng-bootstrap 生成弹出式模态，例如这里的第一个演示https://ng-bootstrap.github.io/#/components/modal/examples ，这里的问题是，当我导入 FormsModule 和 ReactiveFormsModule 时src/app/modal-basic.module.ts 所以里面的代码变成这样

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalBasic } from './modal-basic';
@NgModule({   imports: [BrowserModule, NgbModule, FormsModule,ReactiveFormsModule],
declarations: [NgbdModalBasic],
exports:[NgbdModalBasic],   bootstrap: [NgbdModalBasic] 
}) 
export class NgbdModalBasicModule {}

并在 src/app/modal-basic 中声明一个 FormGroup 以便其中的代码变为

import {Component} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
  closeResult = '';
  exampleFormName:FormGroup;
  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

在 src/app/modal-basic.html 中，当我在表单标签中添加 [formGroup]="exampleFormName" 或将 formContrtrolName="elementName" 添加到控件元素时，代码就变成这样了

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form [formGroup]="exampleFormName">
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker" formControlName="dateOfBirth">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{ closeResult }}</pre>

我最终得到一个不弹出的模式，但它出现在页面中的最后一个元素之后，即使它是在添加 [formGroup]="exampleFormName" 和 formControlName="dateOfBirth" 之前弹出的

我想知道问题出在哪里，所以请尝试使用代码形式 ng-bootstrap it self 而不进行我的修改，然后从她那里复制代码并将其传递到 stackblitz 中以解决问题。

提前致谢。

Answer 1

您需要对这些输入使用 FormControl：

https://stackblitz.com/edit/angular-naoht3?file=src%2Fapp%2Fmodal-basic.ts

import { Component } from "@angular/core";
import {FormGroup, FormControl} from "@angular/forms"
import { NgbModal, ModalDismissReasons } from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: "ngbd-modal-basic",
  templateUrl: "./modal-basic.html"
})
export class NgbdModalBasic {
  closeResult = "";
  exampleFormName = new FormGroup({
    name: new FormControl(),
    dateOfBirth: new FormControl()
  });
  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService
      .open(content, { ariaLabelledBy: "modal-basic-title" })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return "by pressing ESC";
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return "by clicking on a backdrop";
    } else {
      return `with: ${reason}`;
    }
  }
}