Question

我正在跟随Matt Brophy的nested form pattern。基本上，子表单组件创建自己的FormGroup，并将其附加到从父表单组件传入的FormArray。

Matt可能忽略的一个问题是，如果孩子FormGroup碰巧无效，则会抛出“检查后更改”错误。

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'.

重现问题的ChildFormComponent的代码如下所示：

export class ChildFormComponent implements OnInit {

    @Input('children')
    public children: FormArray;

    @Input('child')
    public child: ChildData;

    public childForm: FormGroup;

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        console.log('Initializing child form', this.child);
        this.childForm = this.toFormGroup(this.child);
        this.children.push(this.childForm);
    }

    private toFormGroup(data: ChildData) {
        const formGroup = this.fb.group({
            id: [ data.id ],
            childField1: [ data.childField1 || '', Validators.required ],
            childField2: [ '', Validators.required ],
            childHiddenField1: [ data.childHiddenField1 ]
        });

        return formGroup;
    }

}

您可以看到childField1和childField2之间的区别，其中childField1可以获得有效值，而childField2获取并且为空字符串，这使得表单（及其父表单）无效。

困难之处在于ChildData之前children和FormArray OnInit无法使用。

我试图通过使用其他一些生命周期钩子来破解它，但我仍然得到相同的错误，因此我不知道在哪里可以安全地附加孩子FormGroup。

我forked the repo并更新了软件包，因为我无法编译Matt's version。这是live demo它应该如何运作。

这种模式很漂亮，我的项目已投入其中，因为在我开始添加验证器之前我没有发现这个问题。有没有办法在没有问题的情况下实现这一目标？

[编辑]：我能够在test case中隔离问题，并从那里解决了问题。所以将这个问题标记为重复。

Angular 2+嵌套表单模式导致“检查后更改”错误

0 个答案: