关闭Angular 4中提交事件的Bootstrap 4模态-Java 学习之路

我正在使用Bootstrap 4开发Angular 4应用程序 .

我已经实现了一个可以正常工作的bootstrap模态组件 . 点击它显示并点击交叉关闭它 .

模态包含添加用户的表单 .

enter image description here

点击 Add User 按钮可以正确添加用户 .

如果用户完全成功增加成功，我想要的就是关闭模态 .

我在Angular组件中使用了 onSubmit() 函数：

onSubmit({value, valid}) {
    if (valid) {
      console.log(value);
      this.formInvalid = false;
      this.userMeta = value;
      this.allUsers.unshift(this.userMeta);
    } else {
      console.log('Form is invalid!', valid);
      this.formInvalid = true;
    }
  }

那么有什么方法可以关闭这个函数中的模态？

1 回答

3

假设你正在使用项目ng-bootstrap（你应该使用Angular的bootstrap组件，而不是jQuery）

在模态组件中，您可以通过依赖注入获取对自身的引用：

constructor(public modal: NgbActiveModal) { }

然后你可以使用适当的方法：

modal.dismiss() 以错误/原因关闭 .

modal.close(something) 以结果结束，例如你的 userMeta - 无论你想要返回什么 .

如果您使用的是带有jQuery依赖项而不是Angular版本的标准Bootstrap，那么您应该能够使用 $('#myModal').modal('hide') ，如here所述 .

回复于 2024-04-28T12:49:52+08:00

关闭Angular 4中提交事件的Bootstrap 4模态

1 回答

相关问题