Question

我正在使用 ng-bootstrap 作为我的角度4项目，在项目的一部分我使用了包含表单的模态，当我提交表单时，我希望modal到被关闭我有这个部分的两个组件：

1：点击运行模态
2：模态内的表单验证

我该怎么办？

我的代码是：

<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

您必须向登录组件添加新输出，并在用户登录时发出此输出：

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 !')
          );
      }
    },

  );
}

此外，你必须在你的模态中听这个新事件：

<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>

变量c（来自let-c="close"）和d（来自let-d="dismiss"）是来自ngb-modal的模板中传递的方法。例如，您可以看到方法调用＆＃34; d＆＃34;在模态标题中。有关更多信息，请参阅：https://ng-bootstrap.github.io/#/components/modal/examples

关闭ng-bootstrap模态

1 个答案: