Question

我无法将正确的值填充到FormArray的输入字段中。这是我的HTML：

<div formArrayName="roles" *ngFor="let role of roles.controls; let i=index">
    <div [formGroupName]="i">
        <div class="form-group row">
            <label class="col-md-2 col-form-label" attr.for="{{'roleNameId' + i}}">Role Name {{i+1}}</label>
            <div class="col-md-6">
                <input class="form-control"
                        attr.id="{{'roleNameId' + i}}"
                        type="text"
                        formControlName="roleName">
            </div>
            <label class="col-md-2 col-form-label" attr.for="{{'identifierId' + i}}">
                <input
                    type="checkbox"
                    attr.id="{{'identifierId' + i}}"
                    formControlName="identifier"> identifier
            </label>
            <div class="col-md-2">
                 <button type="button" (click)="removeRole(i)" class="btn btn-danger oi oi-trash"></button>
            </div>
        </div>      
    </div>
</div>

所以这个html会被渲染x次，具体取决于我拥有的角色数量。这很好用，没有显示错误。

但问题是：当我删除一个不是最后一个数组的角色时，填充了正确角色的输入字段会发生变化。以下是角色：

例如，当我删除角色2时，表单如下所示：

role2正在被正确删除，但是role3消失了，后两个角色的名字是最后一个角色（role8）

为什么会这样？当我查看保存所有角色的formArray时，数组具有正确的值，这是证据：

为什么视图中没有显示正确的值？谢谢你的帮助

编辑：这是相关的打字稿代码：

this.sourcesForm = this.fb.group({
        sourceName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(255)]],
        sourceType: ['QUERY'],
        dsl: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(255)]],
        list: [''],
        roles: this.fb.array([this.buildRole()]),
        database: [''],
});

// save roles to temporary variable to map for the roles Formarray
let roles = [];
dslStatement.roles.forEach(role => {
    let oneRole = {
        roleName: role.name,
        identifier: true
    }
    if (role.role === 'IDENTIFIER')
        oneRole.identifier = true;
    else
        oneRole.identifier = false
    roles.push(oneRole);
});
// convert the variable to FormGroups, then the FormGroups to one FormArray 
// and at last set the FormArray to the roles of sourcesForm
const rolesFormGroups = roles.map(roles => this.fb.group(roles));
const rolesFormArray = this.fb.array(rolesFormGroups);
this.sourcesForm.setControl('roles', rolesFormArray);

buildRole(): FormGroup {
    return this.fb.group({
        roleName: '',
        identifier: true
    });
}

addRole() {
    this.roles.push(this.buildRole());
}

removeRole(i: number) {
    this.roles.removeAt(i);
    console.log(this.roles.value);
    console.log(this.roles.controls);
}

Answer 1

<强>更新我建立了一个stackblitz，试图在这里展示问题：https://stackblitz.com/edit/angular-dk-formarray

它使用 Angular 5.0 并且 NOT 有问题。

我能够使用我上面引用的课程（ Angular 4 ）重现这一点：

删除“a”行后，我明白了：

请注意，“a”已消失，但现在我有两个“c”而不是“b”和“c”。

有趣的是，如果我保存然后返回页面，它会正确显示“b”和“c”。

所以它似乎是一个在Angular 5中修复的错误。

我能够在Angular 4.x中找到适用于我的“解决方法”：

deleteTag(index: number): void {
    this.tags.removeAt(index);
    this.productForm.setControl('tags', this.fb.array(this.tags.value || []));
}

您可能会做类似的事情（但我不确定您的roles是否与我的tags一样设置？）

但是你最好转到Angular 5。

Answer 2

尝试一下：

addRole() {
    this.roles = this.sourcesForm.get('roles') as FormArray;
    this.roles.push(this.buildRole());
}

代替

  addRole() {
    this.roles.push(this.buildRole());
}

FormArray

2 个答案: