重置 Angular Reactive FormArray 值

Question

我在 Angular 响应式表单中遇到了一个奇怪的错误。我正在使用 FormArray 创建一个可以添加或删除字段的表单。我还希望能够重置表单，使表单输入的值和数量恢复到原始数量。我目前能够实例化表单，添加字段并删除它们，但是当我按下重置时，我创建的函数首先清空 FormArray，然后使用与最初设置表单相同的过程重新创建字段, 值不能正确显示。不知道为什么会这样，可能是和 html 中用来绑定表单的 formControlNames 有关？

有谁知道导致问题的原因或重置表单值的正确方法是什么？

我在这里创建了一个堆栈闪电战：https://stackblitz.com/edit/angular-reactive-formarray-bug

这是我的组件代码。

import {
  Component, ElementRef
} from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

import { ContentTemplate, ContentTemplateEntry, NewContentEntry } from './models';

import {Observable, Subscription, of} from 'rxjs';

import data from './template-data.json';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  public templateForm: FormGroup;

  public contentTemplate$: Observable<ContentTemplate>;
  public activeTemplate: ContentTemplate;
  public templateSub: Subscription;
  public entries: ContentTemplateEntry[];

  get templateEntries(): FormArray {
    return <FormArray>this.templateForm.get('entries');
  }

  constructor(
    private fb: FormBuilder
  ) {
    this.contentTemplate$ = of(data)
  }

  ngOnInit(): void {
    this.templateSub = this.contentTemplate$.subscribe((template: ContentTemplate) => {
      this.activeTemplate = {...template};
      this.entries = [...template.entries];
      this.templateForm = this.fb.group({
        entries: this.fb.array([])
      });
      this._processEntries(this.entries);
    });
  }

  ngOnDestroy(): void {
    this.templateSub.unsubscribe();
  }

  private _buildEntry(entry: ContentTemplateEntry) {
    const g = this.fb.group({
      id: {value: entry.id},
      title: {value: entry.title, disabled: entry.isRequired},
      orderNumber: {value: entry.orderNumber},
      type: {value: entry.type}
    });
    return g;
  }

  private _processEntries(entries: ContentTemplateEntry[])  {
    entries.forEach((e, i) => {
      this.templateEntries.push(this._buildEntry(e));
    });
  }

  private _getOrderNumber(): number {
    return this.templateEntries.length + 1;
  }

  private _removeItemsFromEntries(): void {
    while (this.templateEntries.length > 0) {
      this.templateEntries.removeAt(0);
    }
  }

  // reinstantiate using the same approach as before
  public resetForm() {
    this._removeItemsFromEntries();
    this._processEntries(this.entries);
  }

  public removeEntry(id: number) {
    this.templateEntries.removeAt(id);
  }

  public addEntry() {
    this.templateEntries.push(
      this._buildEntry(new NewContentEntry({
        orderNumber: this._getOrderNumber()
      }))
    );
  }

  public save() {
    console.log('save triggered');
  }
}

Answer 1

您的错误是由重置按钮上的type="reset" 引起的。删除此属性或替换为type="button" 将解决问题。

重置表单的正确方法是在您的templateForm 属性上调用reset() 方法。

重置 FormGroup，将所有后代标记为原始和未触及，并将所有后代的值设为 null。

Official FormGroup documentation

Answer 2

我认为这个问题与反应形式的异步操作有关。 setTimeout 解决了这个问题，但我认为不是最好的方法。

public resetForm() {
  setTimeout(() => this._processEntries(this.entries));
}

您还可以重构您的 processEntries 方法。

private _processEntries(entries: ContentTemplateEntry[]) {
  const resEntries = entries.map(e => this._buildEntry(e));
  this.templateForm.setControl('entries', this.fb.array(resEntries));
}

而且 _removeItemsFromEntries 不需要更多。

这里的例子https://stackblitz.com/edit/angular-reactive-formarray-bug-pvj4cm

Answer 3

我使用过一次 FormArray，我做了以下操作：

const control = <FormArray>this.templateForm.controls['entries'];
for(let i = control.length-1; i >= 0; i--) {
  control.removeAt(i)
}

Answer 4

这样更好：

const control = <FormArray>this.templateForm.controls['entries'];
while (control.length > 0) {
  control.removeAt(0)
}