Закрыть модальное после отправки угловой 5 формы
Я пробовал много методов в Интернете, но я не могу заставить его работать. Это мой компонент. onSubmit, одно предложение - использовать NgbActiveModal, чтобы закрыть, но я получаю ошибку
"Ошибка: невыполненная (в обещании): Ошибка: StaticInjectorError(AppModule)[UserstuffComponent -> NgbActiveModal]: StaticInjectorError(Платформа: ядро)[UserstuffComponent -> NgbActiveModal]: NullInjectorError: Нет провайдера для Ng
import {Component, ViewChild} from '@angular/core';
import {NgbModal, ModalDismissReasons, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {NgForm} from "@angular/forms";
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './userstuff.component.html'
})
export class UserstuffComponent {
closeResult: string;
bookTitle;
constructor(private modalService: NgbModal, public ngbModalService: NgbActiveModal) {}
open(content) {
this.modalService.open(content).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
console.log(this.closeResult);
});
}
private getDismissReason(reason: any): void {
if (reason === ModalDismissReasons.ESC) {
console.log('by pressing ESC');
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
console.log('by clicking on a backdrop');
} else {
console.log(`with: ${reason}`);
}
}
onSubmit(form : NgForm) {
console.log(form.value);
this.ngbModalService.close();
}
}
Это мой HTML.
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×yo</span>
</button>
</div>
<div class="modal-body">
<form (ngSubmit)="onSubmit(borrowBook)" #borrowBook="ngForm">
<div class="form-group">
<label for="bookTitle">Title of book</label>
<input type="text" class="form-control" id="bookTitle" placeholder="Title of Book"
required [(ngModel)]="bookTitle" name="bookTitle">
</div>
<button type="submit" class="btn btn-default">Borrow!</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('with save')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
Это мой user-view.module.ts, который импортируется в app.module.ts.
@NgModule({
imports: [
CommonModule,
UserViewRoutingModule,
NgbModule.forRoot(),
FormsModule
],
declarations: [
UserViewComponent,
UserhomeComponent,
UserstuffComponent
]
})
export class UserViewModule { }
3 ответа
Я думаю, что вам нужно включить NgbActiveModal в провайдеров (в user-view.module.ts или app.module.ts)
@NgModule({
imports: [
CommonModule,
UserViewRoutingModule,
NgbModule.forRoot(),
FormsModule
],
declarations: [
UserViewComponent,
UserhomeComponent,
UserstuffComponent
],
providers: [
NgbActiveModal
]
})
export class UserViewModule { }
onSubmit(form : NgForm) {
console.log(form.value);
this.modalService.dismissAll('Dismissed after saving data');
}
import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal-basic',
templateUrl: './modal-basic.component.html',
styleUrls: ['./modal-basic.component.css']
})
export class ModalBasicComponent implements OnInit {
modalReference: any;
ngOnInit() {}
// tslint:disable-next-line:member-ordering
closeResult: string;
constructor(private modalService: NgbModal) {
}
open(content) {
this.modalReference = this.modalService.open(content, {size: 'sm'});
this.modalReference.result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log('Result Content: ');
console.log(result);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
c(buttonvalue) {
if (buttonvalue === 'with save') {
this.modalReference.close();
}
d(buttonvalue) {
if (buttonvalue === 'Cross click') {
this.modalReference.dismiss();
}
}
}
}
Надеюсь, это поможет решить эту проблему.
Попробуйте это, вызовите скрипт data-dismiss
<button type="submit" class="btn btn-default" data-dismiss="modal">Borrow!</button>