Angular: 表单：当通过 NgIf 删除/恢复 NgForm 时页面重新加载

创建于 2016-02-01 · 3评论 · 资料来源: angular/angular

诡异却又天真无邪。

试图通过将前一个表单从 DOM 中切换出来并返回到固定到active标志的 NgIf 来实现（丢失）表单重置功能

<form *ngIf="active" 
          (ngSubmit)="onSubmit()" #heroForm="ngForm">

像这样由组件clear方法控制

  clear() {
    this.model = new Hero(42, '', '');
    this.active = false;
    setTimeout(()=> this.active=true, 0);
  }

当表单有效时（就像在开始时一样），单击清除会导致页面重新加载。如果表单无效（例如，没有名称），则不会重新加载。

资料来源

wardbell

👍1

最有用的评论

清除按钮的类型为“提交”。所以点击它会导致表单提交。 NgForm 应该拦截提交事件，但是因为 NgIf 从 DOM 中删除了表单元素，所以拦截不会发生。您可以通过将按钮类型设置为“按钮”来修复它。

vsavkin 于 2016-02-01

👍2 🎉1

vsavkin 于 2016-02-01

👍2 🎉1

谢谢。我不知道<button> _没有类型属性_ 与提交按钮相同！
这确实解决了这个修订版 plunker 中的问题： http ://plnkr.co/edit/u3ltLP84JHn2VkoFKf46?p=preview

关闭这个问题并打开#6822，它需要一个明确的reset功能来替换这个 plunker 说明的黑客。

wardbell 于 2016-02-01

👍1

由于不活动，此问题已自动锁定。
如果您遇到类似或相关的问题，请提交新问题。

阅读有关我们的自动对话锁定政策的更多信息。

_{_此操作已由机器人自动执行。_}

angular-automatic-lock-bot[bot] 于 2019-09-08

此页面是否有帮助？

0 / 5 - 0 等级