Question

我正在使用bootstrap 4 modal。当我按下关闭按钮模式正确关闭。但我想在提交表单中的创建按钮后关闭模态。我正在使用角4。

<div class="modal fade" id="createLabel" 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">New project</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 name="form"  (ngSubmit)="f.form.valid && newproject(createLabel)" #f="ngForm" novalidate >
      <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
            <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
            <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
            </div>
            <div class="form-group" >
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button [disabled]="loading" class="btn btn-primary" >Create</button> </div>
        </form>
  </div>

 </div>
</div>

Answer 1

使用Angular时，不必使用jQuery或其他外部库。您只需要EventEmitter即可在提交表单时发出事件。

看看我做的代码示例：

首先是模态的代码

modal.component.html

<div>
   <h1>This is my modal</h1>
   <button (click)="onCloseModal($event)">Submit form</button>
</div>

modal.component.ts

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
  @Output() closeModalEvent = new EventEmitter<boolean>();

  constructor() { }

  onCloseModal(event: any){
   this.closeModalEvent.emit(false);  
  }
}

现在父母的代码

parent.component.html

<div>
  <app-modal [modalVisible]="isVisible" (closeModalEvent)="onClose($event)"></app-modal>
  <button (click)="showModal()">open modal</button>
</div>

parent.component.ts

@Component({
      selector: 'app-parent',
      templateUrl: './parent.component.html',
      styleUrls: ['./parent.component.scss']
    })
    export class ModalComponent {
      modalVisible = false;

      constructor() { }

      onClose(isVisible: boolean){
       this.modalVisible = isVisible;
      }

      showModal(){
       this.modalVisible = true;
     }
    }

Answer 2

如果要从组件关闭模态，则可以使用

$("#createLabel").modal("hide");

否则，您可以将“提交”按钮的类型从“提交”更改为按钮，并按如下方式使用

<button type="button" (click)='onsubmit()' data-dismiss="createLabel">Create</button>

这将关闭你的模态并同时调用你提交函数。

Answer 3

在我看来，你有几个选择。

1。）也将数据关闭添加到“创建”按钮。

2。）你可以使用@ angular / core和JQuery的@ViewChild来获取对模态的引用，然后点击Create你可以关闭它。

对于第二个选项，您必须将JQuery导入到项目中，无论这对您意味着什么。然后你可以像这样使用ViewChild和JQuery：

@ViewChild('completeModal') completeModal: ElementRef;
$(this.completeModal.nativeElement).modal('hide');

Answer 4

在斜角使用jQuery代替$，因为您可以轻松识别

declare var jQuery:any;

要关闭，请在组件中写下一行

jQuery("#myModal").modal("hide");

或

  jQuery('#addEditUserModal').modal('toggle');

Answer 5

在提交时关闭弹出模式的简单方法是

<a class="confirm" data-dismiss="modal" (click)="save()">Confirm</a>

Answer 6

同时是最简单，最可靠的方法：

    <div class="modal fade" id="createLabel" 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">New project</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 name="form" #f="ngForm" novalidate >
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !projectname.valid }">
                <input type="text" class="form-control" placeholder="Your Project Title. Eg. Building Ark v1.0" name="projectname"  [(ngModel)]="createLabel.projectname"  minlength="3" #projectname="ngModel" required />
                <div *ngIf="f.submitted && !projectname.valid" class="help-block" style="color: red;">Atleast 3 charater</div>
                </div>
                <div class="form-group" >
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button [disabled]="!f.form.valid" (click)="newproject(createLabel)" 
                       data-dismiss="modal" type="button" class="btn btn-primary" >Create</button> </div>
            </form>
      </div>
    
     </div>
    </div>

Angular 4：表单提交事件完成后关闭模式

6 个答案: