如何通过按输入登录关闭模式窗口

Question

选择

登录按钮后，必须关闭对话框。我一直有一些错误。例如，单击"登录"按钮时，对话框将关闭，但所有内容都会变暗。

谁知道如何解决这样的问题，帮助。

.HTML：

<div class="main-content">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
    Authentication
</button>
<button type="submit" class="btn btn-danger pull-right" (click)="logOut()">Close</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Login</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form (ngSubmit)="onSignInSubmit()" #f="ngForm" >
                    <div class="row">
                      <div class="form-group form-black label-floating is-empty">
                        <input id="email"
                               type="email"
                               required
                               name='email'
                               [(ngModel)]="signInUser.email" class="form-control">
                        <label class="control-label" for="email">Email</label>
                      </div>

                      <div class="form-group form-black label-floating is-empty">
                        <input id="password"
                               type="password"
                               required
                               name='password'
                               [(ngModel)]="signInUser.password"
                               class="form-control">
                        <label class="control-label" for="password">Password</label>
                      </div>

                    </div>
                  </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit"
                [disabled]="!(f.valid)"
                [ngClass]="{'disabled': !(f.valid)}"
                class="btn btn-danger">Login </button>
            </div>
        </div>
    </div>
</div>

打字稿：

export class InfoComponent implements OnInit {
  signInUser = {
    email: '',
    password: ''
  };
  @Output() onFormResult = new EventEmitter<any>();
  constructor(protected authService:AuthService, private router:Router) { }
  ngOnInit() {
  }
  logOut(){
    this.authService.logOutUser().subscribe(() => this.router.navigate(['/info']));
  }
  onSignInSubmit(){
    this.authService.logInUser(this.signInUser).subscribe(
        res => {
          if(res.status == 200){
            // loginForm.resetForm();
            this.onFormResult.emit({signedIn: true, res});
            this.router.navigate(['/profile']);          }
        },
        err => {
          console.log('err:', err);
          // loginForm.resetForm();
          this.onFormResult.emit({signedIn: false, err});
        }) 
  }  
}

附言我为我的英语不好道歉。

Answer 1

我正在使用Ngbmodal，这是一个简单的例子，我希望这有所帮助：

在您的组件中：

constructor(private modalService: NgbModal) { }
open(content, size?) {
        let promise = new Promise((resolve) => {
            size = size || 'lg';
            this.modalService.open(content, { size: size }).result.then((result) => {
                if (!['cancel', 'close'].includes(result)) {
                    resolve(result);
                }
            }, (reason) => {
                // TODO: implement on close by another reasons
            });
        });
        return promise;
    }

在 HTML 中：

<ng-template #sampleModal let-c="close" let-d="dismiss">
    <div class="modal-header"></div>
    <div class="modal-body"></div>
    <div class="modal-footer">
            <button type="button" class="btn btn-outline-dark btn-block" (click)="c('close')">Cancel</button>
    </div>
</ng-template>

Answer 2

假设你已经包含了jquery。

在顶部

declare $ :any;

---

   onSignInSubmit(){
    $('#exampleModal').modal('hide'); ....

---

我希望这有所帮助。随意发表评论。