Question

我偶然发现了这个问题，因为在Angular 4.3.5中重置表单后Chrome浏览器中的黄色输入背景没有消失

模板：

<form #myForm="ngForm">
    [...]
    <button (click)="angularReset()">reset Form (Angular 4)</button>
    <button (click)="htmlReset()">reset Form (HTML5)</button>
</form>

类：

@ViewChild('myForm')
private myForm: NgForm
@ViewChild('myForm', { read: ElementRef })
private myFormElementRef: ElementRef

[...]

private angularReset() {
    this.myForm.reset()
}

private htmlReset() {
    this.myFormElementRef.nativeElement.reset()
}

Angulars表单重置方法并不关心重置本机html表单。

这是Angular 4.3.5的错误还是功能？

（指南https://angular.io/guide/forms并不关心重置本机html表单。所以我会说：指南不完整或者是一个有角度的错误。）

Answer 1

您可能没有正确设置模型。

它的工作原理如下：

<强> HTML

<form #myForm="ngForm">

      <input name="input1" #input1="ngModel" [(ngModel)]="name">

      <button type="reset">reset </button>
      <button type="button" (click)="myForm.reset()">reset from template</button>
      <button type="button" (click)="onReset(myForm)">reset from class</button>
      <button type="button" (click)="onReset2()">reset from class</button>
</form>

<强>打字稿

  name:string;
  @ViewChild("myForm") myForm;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  onReset(myForm){
    myForm.reset();
  }

  onReset2(){
    this.myForm.reset()
  }

<强> plunker

Angular 2+（4.3.5）ngForm重置（模板驱动）不包括html-form重置 - Bug或功能？

1 个答案: