Close modal after submit angular 5 form

Question

I tried alot of methods online but i can't get it to work. This is my component. onSubmit, one suggestion is to use NgbActiveModal to close but i get the error

"ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[UserstuffComponent -> NgbActiveModal]: StaticInjectorError(Platform: core)[UserstuffComponent -> NgbActiveModal]: NullInjectorError: No provider for NgbActiveModal!"

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();
      }
    }

This is my 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">&times;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>

This is my user-view.module.ts which is imported into app.module.ts.

@NgModule({
  imports: [
    CommonModule,
    UserViewRoutingModule,
    NgbModule.forRoot(),
    FormsModule
  ],
  declarations: [
    UserViewComponent,
    UserhomeComponent,
    UserstuffComponent
  ]
})
export class UserViewModule { }

Answer 1

I think you need to include 'NgbActiveModal' in providers (in user-view.module.ts or app.module.ts )

@NgModule({
      imports: [
        CommonModule,
        UserViewRoutingModule,
        NgbModule.forRoot(),
        FormsModule
      ],
      declarations: [
        UserViewComponent,
        UserhomeComponent,
        UserstuffComponent
      ],
    providers: [
      NgbActiveModal
    ]
    })
    export class UserViewModule { }

Answer 2

    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();
        }

      }

      }

    }

I hope, this will help to solve this problem.

Answer 3

  onSubmit(form : NgForm) {
    console.log(form.value);
    this.modalService.dismissAll('Dismissed after saving data');
  }

Answer 4

试试这个，调用脚本 data-dismiss

<button type="submit" class="btn btn-default" data-dismiss="modal">Borrow!</button>