Angular提交表单后如何清空Modal中的数据？

这问题我之前做项目时也碰到过，核心原因是你用了[(ngModel)]双向绑定，表单的值和组件里的article对象是绑定在一起的，只要这个对象没被重置，下次打开Modal时视图就会显示之前的值。下面给你两种实用的解决办法：

方法一：提交成功后立即重置表单数据 #

在你的onSubmit方法里，当数据成功保存到数据库的回调中，直接把article对象重置为初始状态，双向绑定会自动同步清空表单：

onSubmit() {
  this.saveArticle((savedArticle: Article): void => {
    this.onSave.emit(savedArticle);
    // 重置article到初始状态，根据你的业务需求设置默认值
    this.article = {
      code: '',
      isActive: true, // 对应你原来checkbox默认选中的状态
      title: ''
    } as Article;
  });
}

如果Article是一个类而不是接口，你可以这样初始化：

this.article = new Article();
this.article.code = '';
this.article.isActive = true;
this.article.title = '';

方法二：监听Modal打开事件，每次打开都重置表单 #

有时候用户可能没提交就关闭了Modal，下次再打开时也需要清空表单。这时候可以利用Bootstrap Modal的show.bs.modal事件，在Modal即将显示时重置表单：

首先修改Modal的HTML代码，添加事件绑定：

<div [id]="id" class="modal fade" role="dialog" (show.bs.modal)="resetForm()">
  <!-- 其他Modal内容不变 -->
</div>

然后在组件中添加resetForm方法：

resetForm(): void {
  this.article = {
    code: '',
    isActive: true,
    title: ''
  } as Article;
}

为什么不建议直接操作DOM？ #

你注释掉的$('#' + this.id).removeData('');是jQuery操作DOM的方式，但Angular是数据驱动的框架，直接修改绑定的数据比操作DOM更符合Angular的设计理念，也能避免一些DOM操作带来的意外问题。

建议把两种方法结合起来用：提交成功后重置，打开Modal时也重置，这样不管用户是提交后还是取消后打开Modal，表单都会是干净的初始状态。

内容的提问来源于stack exchange，提问作者billy_56