如何通过按输入登录来关闭模式window？

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

P.S。我为我糟糕的英语道歉。

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'); ....

希望对您有所帮助。欢迎评论。

如何通过按输入登录来关闭模式window？

How to close the modal window by pressing the input login?

angular

typescript

bootstrap-material-design