Angular 7 Forms - 有条件地需要 FormGroup

Question

我正在构建一个表单，用户可以在其中设置付款选项。有一个下拉菜单可以选择使用哪种付款方式。对于每种付款方式，都有一个 FormGroup，其中包含所选方法的选项:

form: FormGroup = new FormGroup({
        method: new FormControl('paypal', {
            validators: [
                Validators.required,
            ],
        }),
        paypal: new FormGroup({
            email: new FormControl(null, {
                validators: [
                    Validators.required,
                    Validators.pattern(EMAIL_PATTERN)
                ],
            }),
        }),
        other: new FormGroup({
            email: new FormControl(null, {
                validators: [
                    Validators.required,
                    Validators.pattern(EMAIL_PATTERN)
                ],
            }),
        }),
    });

这里的问题是，只有当 FormGroups 都有效时，表单才有效。

但是只要所选付款方式的 FormGroup 有效，表单就应该有效。

Answer 1

我建议编写一个自定义的根级 FromGroup 验证器。您基本上有一个定制的验证要求，它需要一个定制的验证器。

验证器可以在整个 FormGroups 以及单个 FormControls 上工作，因为它们都是 AbstractControls在幕后。

This should point you in the right direction

编辑:对于任何寻求快速答案的人来说，这里有一个 stackblitz:nested form validation