Angular2 .reset() 没有在 firefox 中重置 @Input 值答案

【问题标题】：Angular2 .reset() not resetting @Input values in firefoxAngular2 .reset() 没有在 firefox 中重置 @Input 值
【发布时间】：2017-04-08 22:01:26
【问题描述】：

好的，浏览器有问题，不确定我是否遗漏了什么。这是我的 plunker https://embed.plnkr.co/sStsEL/ 我的问题是当我编辑一个行项目并在编辑过程中单击 Revert 时，Chrome 将我的值设置回数据模型值，但 Firefox 会擦除所有字段。我错过了什么？也许我应该将此上报给开发人员，但是有解决方法吗？如果我控制台记录 NgOnChanges 函数中的 @Input 值，我会得到正确的数据。一切都可以看到记录在屏幕上。

【问题讨论】：

标签： angular typescript

【解决方案1】：

你可以看看FormGroupDirective

@Directive({
  selector: '[formGroup]',
  providers: [formDirectiveProvider],
  host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'}, <== reset event
  exportAs: 'ngForm'
})
export class FormGroupDirective extends ControlContainer implements Form,
    OnChanges {   
  ...
  onReset(): void { this.resetForm(); }

  resetForm(value: any = undefined): void {
    this.form.reset(value);
    this._submitted = false;
  }

您可以在[formGroup] 上注意到reset 事件，并且它的处理程序正在运行form.reset

由于您的按钮元素具有type="reset"，并且您在此元素上有click 事件，并且还绑定了disabled 属性

<button [disabled]="fg.pristine" type="reset" (click)="revert()"

Chrome 和 Firefox 中的行为会有所不同：

https://jsfiddle.net/f1t5khwk/

正如您在上面的示例中看到的那样，单击按钮后您将disabled 属性设置为true，因此Chrome 中的reset 事件不会冒泡，而Firefox 继续捕获reset 事件。

所以你的解决方法是替换

type="reset"

与

type="button"

Modified Plunker

【讨论】：