Schließen ng-bootstrap modal

Question

Ich benutze ng-Bootstrap für meine eckige 4-Projekt und in einem Abschnitt des Projekts habe ich modal, die ein Formular enthalten, wenn ich das Formular, ich möchte modal geschlossen werden. Ich habe zwei Komponenten für diesen Abschnitt:

1: Klicken Sie modal
2 auszuführen: Form Validierung innerhalb des modalen

Was kann ich tun?

mein Code:

<ng-template #signin let-c="close" let-d="dismiss"> 
    <div class="modal-header"> 
     <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    <div class="modal-body"> 
     <div class="row"> 
      <div class="col-12 mt-5 mn-15px mb-2"> 
       <div class="wrapper-left-content"> 
        <app-login-form></app-login-form> 
       </div> 
      </div> 
     </div> 
    </div> 
</ng-template> 

login.component.html

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" class="form-horizontal"> 
    <div class="form-group" [ngClass]="{ 'has-error': !(Username.valid || Username.untouched)}"> 
     <input class="form-control" type="text" [formControl]="Username" placeholder='sample'> 
     <div [hidden]="Username.valid || Username.untouched"> 
      <span class="text-danger" [hidden]="!Username.hasError('required')"> 
       'sample' 
      </span> 
     </div> 
    </div> 
    <div class="form-group" [ngClass]="{ 'has-error': !(Password.valid || Password.untouched)}"> 
     <input class="form-control" type="Password" [formControl]="Password" placeholder='sample'> 
     <div [hidden]="Password.valid || Password.untouched"> 
      <span class="text-danger" [hidden]="!Password.hasError('required')"> 
        'sample' ! 
      </span> 
      <span class="text-danger" [hidden]="!Password.hasError('minLength')"> 
     'sample' ! 
      </span> 

     </div> 
     <a class="fs-12 pull-left my-2" href="#">'sample'؟</a> 
    </div> 

    <div class="form-group"> 
     <button type="submit" [disabled]="!loginForm.valid" class="btn btn-md btn-info btn-block">'sample'</button> 
    </div> 
</form> 

login.component.ts

export class LoginComponent { 
    @Output() cancel = new EventEmitter(); 
    errorMessage: string; 

    Username = new FormControl('', [ 
    Validators.required, 
    ]); 
    Password = new FormControl('', [ 
    Validators.required, 
    Validators.minLength(6) 
    ]); 
    loginForm: FormGroup = this.builder.group({ 
    Username: this.Username, 
    Password: this.Password 
    }); 

    constructor(private builder: FormBuilder, private auth: AuthService, private router: Router, 
       private toastr: ToastsManager, vcr: ViewContainerRef , public modalService: NgbModal) { 
    this.toastr.setRootViewContainerRef(vcr); 


    } 


    login(values: any) { 
    this.auth.login(values) 
     .subscribe(
     loggedIn => { 
      if (loggedIn) { 
      this.router.navigateByUrl(''); 
      this.toastr.success('sample', null, {toastLife: 4000}); 
      this.auth.login_again(values) 
       .subscribe(
       () => console.log(' login_again is working !') 
      ); 
      } 
     }, 

    ); 
    } 

Answer 1

Sie haben eine neue Ausgabe hinzufügen zu Ihrer Login-Komponente und strahlen diese aus ausgegeben, wenn der Benutzer angemeldet ist:

export class LoginComponent { 
    @Output() closeModal: new EventEmitter<any>(); 
... 
login(values: any) { 
    // add it here when you want the modal closed in every case (also when 
    // the login fails) 
    this.closeModal.emit(); 

    this.auth.login(values) 
     .subscribe(
    loggedIn => { 
     if (loggedIn) { 
     this.router.navigateByUrl(''); 

     // add the "this.closeModal.emit()" here if you want the modal 
     // closed when the user is logged in 

     this.toastr.success('sample', null, {toastLife: 4000}); 
     this.auth.login_again(values) 
      .subscribe(
      () => console.log(' login_again is working !') 
     ); 
     } 
    }, 

); 
} 

Darüber hinaus haben Sie zu diesem neuen Ereignis in Ihrem modal zu hören:

<ng-template #signin let-c="close" let-d="dismiss"> 
<div class="modal-header"> 
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
</div> 
<div class="modal-body"> 
    <div class="row"> 
     <div class="col-12 mt-5 mn-15px mb-2"> 
      <div class="wrapper-left-content"> 
       <!-- you can use the assigned variable "c" or "d" from the 
        ng-template--> 
       <app-login-form (closeModal)="c()"></app-login-form> 
      </div> 
     </div> 
    </div> 
</div> 

Die Variablen c (von let-c="close") und d (aus let-d="dismiss") sind Methoden in der Vorlage aus dem NGB-Modal übergeben. Zum Beispiel können Sie im modalen Header einen Aufruf der Methode "d" sehen. Für weitere Informationen siehe: https://ng-bootstrap.github.io/#/components/modal/examples