添加 [formGroup]="FormName" 或 formControlName="elementName" 时,ng-bootstrap 模式不会弹出
ng-bootstrap modal doesn't popup when adding [formGroup]="FormName" or formControlName="elementName"
iam 使用 ng-bootstrap 生成弹出模式,例如这里的第一个演示 https://ng-bootstrap.github.io/#/components/modal/examples,这里的问题是,
当我在 src/app/modal-basic.module.ts 中导入 FormsModule 和 ReactiveFormsModule 时,里面的代码变成这样
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">×</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 代码形式,无需我修改,然后从她那里复制代码并在 stackblitz 中通过它来解决问题。
提前致谢。
您需要为这些输入使用 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}`;
}
}
}
iam 使用 ng-bootstrap 生成弹出模式,例如这里的第一个演示 https://ng-bootstrap.github.io/#/components/modal/examples,这里的问题是, 当我在 src/app/modal-basic.module.ts 中导入 FormsModule 和 ReactiveFormsModule 时,里面的代码变成这样
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">×</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 代码形式,无需我修改,然后从她那里复制代码并在 stackblitz 中通过它来解决问题。
提前致谢。
您需要为这些输入使用 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}`;
}
}
}