输入值未正确填写在 FormArray 中

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