将输入字段重置为没有表单包装的原始数据

Question

如何将没有数据的角度输入元件重置为原始状态？我的模型是一个对象。

在我当前的版本（Stackblitz example）中，数据被重置一次，但是第二次视图模型未正确更新。

我在stackoverflow上遇到过this answer，但是主要的答案取决于使用包装器表单元素。

Answer 1

我用答案更新了您的代码。

您可以在此处查看完整的代码：https://stackblitz.com/edit/angular-gdajaw

我唯一要更改的是（强烈建议使用）而不是超时，我使用ChangeDetectorRef等待角度变化检测运行。检测到更改后，您可以选择添加的输入进行聚焦。

这是更改后的AppComponent：

import { Component, Renderer2, ChangeDetectorRef } from '@angular/core';
import { Note } from './note.model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public notes: Note[] = [];
  public newNote = new Note();

  constructor(
    protected renderer: Renderer2,
    private cRef: ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.notes.push(new Note({ content: 'foo' }));
    this.notes.push(new Note({ content: 'bar' }));
  }

  newLine(note: string) {

  // Switch it up
  this.notes.push(new Note(this.newNote));

  // Select our original element
  // setTimeout(() => this.renderer.selectRootElement('#note'+(this.notes.length-1)).focus(), 0);

  // use ChangeDetectorRef detectChanges method to wait for angular to go through change detection
  this.cRef.detectChanges();
  // after change detection you can select the added input to focus
  this.renderer.selectRootElement('#note' + (this.notes.length - 1)).focus()

  // Reset the new line
  //this.newNote = new Note();
  this.newNote = new Note({content: null});
  }
}