Question

所以我有一个FormArray包含带有3个控件的FormGroups。在视觉上它看起来像一个每行有3个输入的表。以下是它的外观：

我希望当用户按Tab键或输入行中的最后一个输入时 - 在它之后添加一个新的空行。所以我在最后一个输入中添加了(keydown)="addRow($event.keyCode, i)"并创建了函数：

public addRow(keyCode, index)
{
    if (keyCode !== 9 && keyCode !== 13) {
        return;
    }

    let formItems = this.form.get('items') as FormArray;

    formItems.insert(
        index + 1,
        this.formBuilder.group({
            'start': ['', Validators.required],
            'title': ['', Validators.required],
            'category': [''],
        })
    );
}

在推送FormGroup之后，我可以在表单数组中正确地看到控件，但是视图会奇怪地更新。例如，我按第一行中最后一个输入的选项卡后得到这个结果：

最后一行被移除，我在第一行之后得到两个空行。我找不到原因。这是推送后的FormArray，项目在那里是正确的：

以下是视图代码：

<div formArrayName="items">
    <div *ngFor="let item of form.controls.items.controls; let i=index" [formGroupName]="i" class="row item-index-{{ i }}">
        <div class="form-group">
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="Start" autocomplete="off" formControlName="start">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="Title" autocomplete="off" formControlName="title">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="Category" autocomplete="off" formControlName="category" (keydown)="addRow($event.keyCode, i)">
            </div>
            <div class="col-sm-2">
                <a class="btn btn-icon-only default">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <a class="btn btn-icon-only default">
                    <i class="fa fa-arrow-down"></i>
                </a>
                <a class="btn btn-icon-only red">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
    </div>
</div>

知道为什么会这样吗？

Answer 1

我之前在没有在formarray的末尾插入formgroup时遇到过这个问题。由于某种原因，似乎Angular无法在模板中跟踪索引，并且使用trackBy解决了它。所以试试：

<div *ngFor="let item of form.get('items').controls; let i=index; trackBy:trackByFn" 
            [formGroupName]="i" class="row item-index-{{ i }}">

并在TS中：

trackByFn(index: any, item: any) {
  return index;
}

Answer 2

如果有人遇到此问题但原因不同，请检查您是否正确添加控件：

let arr = new FormArray([]);
arr.push(....);               // Make sure you do this
arr.controls.push(....);      // And not this!

Angular2 FormArray插入不会相应地更新视图

2 个答案: