1

我正在遵循 Matt Brophy 的这种嵌套形式模式。本质上，子表单组件创建自己的FormGroup，并将其附加到FormArray从父表单组件传入的 a 中。

我遇到的一个马特可能忽略的问题是，如果孩子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.

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

我已经分叉了 repo并更新了软件包，因为我无法编译Matt 的版本。这是它应该如何工作的现场演示。

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

[编辑]：我能够在测试用例中隔离问题，并从那里解决。因此，将此问题标记为该问题的副本。

4

0 回答 0