Angular 7 个表单 - 有条件地需要 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

Answer 2

为什么不禁用不需要的控件 - 那么它们就得不到验证？

Angular 7 个表单 - 有条件地需要 FormGroup

Angular 7 Forms - Conditionally require FormGroup

angular

forms

typescript

angular7

angular-forms