Question

我在Angular反应形式中遇到了一个奇怪的错误。我正在使用FormArray创建可以在其中添加或删除字段的表单。我还希望能够重置表单，从而使表单输入的值和数量返回到原始数量。目前，我可以实例化表单，添加字段并删除它们，但是当我按reset时，我创建的函数首先清空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

我认为反应形式的异步操作存在此问题。 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 2

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

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

重置FormGroup，将所有后代标记为原始且未更改，并将所有后代的值设置为null。

Official FormGroup documentation

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)
}

重置角反应式FormArray值

4 个答案: